design-infraReport a problem or share feedback← Catalog
Path drawing
curatedfreemotion/path-drawing
An example of animating a SVG path to make a path drawing effect, using Motion for React.
$
pnpm add motion # then adapt the free source from https://motion.dev/examples/react-path-drawingnpm deps: motion
Our notes
pathLength: SVG line drawing for icons, checkmarks, signatures and diagrams. Free example (motion is MIT); copy and adapt the source from the example page.- Source
- Motion (motion.dev)
- Kind
- transition
- Categories
- transition
- Use as
- recipe — technique you apply to your own markup
- Applies to
- illustrationloaderbadge
- Motion
- on enter, state · subtle · motion · low cost
- Tags
- motion, animate, variants
- Licence
- motion / motion/react / motion-v are MIT. Motion+ (premium components, example source, AI Kit pro tools) is paid — one-time Personal licence or per-seat Business.
- Live demo
- motion.dev
- Docs
- motion.dev
Similar
Compare all 4 →- anime.js v4animejs/animejsReach for it over Motion when choreography is the point: long multi-element timelines (createTimeline), grid staggers from center, SVG morphTo / createDrawable line drawing / createMotionPath, createDraggable, onScroll, and a free splitText (Motion's is Motion+). Vanilla JS — no React components: run it in useEffect inside createScope({ root }) and call revert() on unmount. For presence, layout and gestures in React, Motion stays the default. See catalog/sources/motion.md.
- Skeleton loader and revealtransitions/skeleton-revealSkeleton → content crossfade without layout jump.
- Thinking statestransitions/thinking-statesRotating agent thinking labels.