What i want is to create a custom animated connection lines in reactflow. i dont want the one provided by reactflow that is a dashed line when given the props anitmated: true
what i know is we can give them custom styling using
setEdges((eds) => [
...eds,
{
source: 2,
targetHandle: 'bottom',
target: 1,
sourceHandle: 'top',
id: 1,
type: 'smoothstep',
style: { stroke: `${css}`, strokeWidth: 4 },
},
]);
i want to create something like this using custom css
I created a custom Edge with the following code. Posting here incase someone else is looking for this answer
import { useState } from 'react';
import { getBezierPath, BaseEdge, EdgeLabelRenderer } from 'reactflow';
export default function NormalEdge({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
label,
markerEnd,
}) {
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
return (
<>
<BaseEdge path={edgePath} markerEnd={markerEnd} style={{ stroke: `${data.color1}`, strokeWidth: 4 }} />
<EdgeLabelRenderer>
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
fontSize: 12,
backgroundColor: '#EEF0F6',
fill: '#EEF0F6',
pointerEvents: 'all',
padding: '4px',
}}
className="nodrag nopan"
>
{label}
</div>
</EdgeLabelRenderer>
<circle
style={{ filter: `drop-shadow(3px 3px 5px ${data.color1}` }}
r="4"
fill={`${data.color1}`}
className="circle"
>
<animateMotion dur="6s" repeatCount="indefinite" path={edgePath} />
</circle>
</>
);
}