Animated SVG Edge
An edge that animates a custom SVG element along the edge’s path. This component is based on the animating SVG elements example.
Installation
Make sure to follow the prerequisites before installing the component.
npx shadcn@latest add https://ui.reactflow.dev/animated-svg-edge
Custom shapes
It is intended that you add your own SVG shapes to the module. Each shape should
be a React component that takes one prop, animateMotionProps
, and returns some
SVG.
You can define these shapes in a separate file or in the same file as the edge
component. In order to use them, you need to add them to the shapes
record like
so:
const shapes = {
box: ({ animateMotionProps }) => (
<rect width="5" height="5" fill="#ff0073">
<animateMotion {...animateMotionProps} />
</rect>
),
} satisfies Record<string, AnimatedSvg>;
The keys of the shapes
record are valid values for the shape
field of the
edge’s data:
const initialEdges = [
{
// ...
type: "animatedSvgEdge",
data: {
duration: 2,
shape: "box",
},
} satisfies AnimatedSvgEdge,
];
If you want to render regular HTML elements, be sure to wrap them in an SVG
<foreignObject />
element. Make sure to give the <foreignObject />
an id
attribute and use that as the href
attribute when rendering the <animateMotion />
element.