Custom animated Reactflow Connection Lines

Question

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

Answer 1

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>
        </>
    );
}