Draw Path
Draws SVG strokes as if by hand: signatures, underlines, diagrams.
Draw Path animates the strokes of any inline SVG as though drawn by hand (GSAP DrawSVGPlugin), on mount, on scroll into view, or scrubbed with the scroll position. Use it for signatures, hand-drawn underlines, diagrams and line icons.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/draw-path.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/draw-path.
Builds on: motion
Usage
import { DrawPath } from "@/components/ui/draw-path";
<DrawPath viewBox="0 0 100 20"><path d="M0 10 Q 50 0 100 10" /></DrawPath>Motion
DrawSVGPlugin animates each stroke from 0% to 100% in sequence.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
DrawPath
Extends <svg> props; put stroked elements inside.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | "mount" | "inView" | "scroll" | "inView" | When to draw. |
| duration | number | 1.4 | Seconds. |
Accessibility
- Add a <title> to meaningful SVGs.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: svg line drawing animation · draw svg react · signature animation · path animation gsap · stroke animation