SVG Paths

Path drawing, morphing, and animation. Foundation for connection lines and flow arrows.

Path Drawing

Animate the drawing of SVG paths using pathLength.

<motion.path
  d="M 10 50 Q 50 10, 100 50 T 190 50"
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{ duration: 2 }}
/>

Path Morphing

Smoothly morph between different path shapes.

const paths = {
  circle: "M 100 20 C 155 20...",
  square: "M 30 30 L 170 30...",
  star: "M 100 10 L 120 70..."
};

<motion.path
  animate={{ d: paths[shape] }}
  transition={{ duration: 0.5 }}
/>

Connection Lines

Animated bezier curves connecting nodes. Core pattern for the drawing tool.

Animate flow

const generateBezierPath = (x1, y1, x2, y2) => {
  const midX = (x1 + x2) / 2;
  return `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
};

<motion.path
  d={generateBezierPath(node1.x, node1.y, node2.x, node2.y)}
  markerEnd="url(#arrowhead)"
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
/>

Flow Arrow Styles

Different arrow styles for different diagram types.

const arrows = {
  straight: "M 30 100 L 270 100",
  curved: "M 30 100 Q 150 30, 270 100",
  stepped: "M 30 100 L 100 100 L 100 50 L 200 50 L 200 100 L 270 100"
};

Animated Icon

Draw icons with animated strokes. Useful for loading states.

<motion.path
  d="M 50 5 L 90 27.5 L 90 72.5..."
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{ duration: 1.5 }}
/>

<motion.circle
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ delay: 1.2 }}
/>