Motion Path | Svelte Motion

FIG-001/ SVG

riding an svg path.

One SVG path drives two tracks at once — motion.path draws itself by tweening pathLength, and a motion.div rides the same curve via CSS offset-path + offsetDistance.

motion.path tweens its pathLength from 0 to 1 — SVG renders the path with a dash array sized to the current value, so the line appears to draw itself stroke-by-stroke.
The box uses CSS offset-path: path(…) with the same path string. Motion tweens offsetDistance from 0% to 100%, which translates and rotates the element along the curve — no manual coordinate calc.
One transition object drives both tracks (duration: 4, repeat: Infinity, repeatType: 'reverse') so the stroke and the box stay in lockstep forward and back.

↩ all examples

pattern · pathLength + offsetDistance mode · live running source

category · svg

sheet · sheet 01 / 01

⟳ to re-run