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.

Dependencies:

@xyflow/react

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/animated-svg-edge


pnpm dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/animated-svg-edge


yarn dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/animated-svg-edge


bun x shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/animated-svg-edge

Usage

1. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import { AnimatedSvgEdge } from "@/registry/components/animated-svg-edge";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "A" },
  },
  {
    id: "2",
    position: { x: 400, y: 400 },
    data: { label: "B" },
  },
];
 
const defaultEdges = [
  {
    id: "1->2",
    source: "1",
    target: "2",
    type: "animatedSvgEdge",
    data: {
      duration: 2,
      shape: "package",
      path: "smoothstep",
    },
  } satisfies AnimatedSvgEdge,
];
 
const edgeTypes = {
  animatedSvgEdge: AnimatedSvgEdge,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        edgeTypes={edgeTypes}
        defaultEdges={defaultEdges}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}

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.