# Motion Path > Animate elements along an SVG path with offset distance using Svelte Motion. Create complex motion trajectories with minimal configuration. **Source:** [https://motion.svelte.page/examples/motion-path](https://motion.svelte.page/examples/motion-path) **Markdown mirror:** [https://motion.svelte.page/examples/motion-path.md](https://motion.svelte.page/examples/motion-path.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: 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`. **Metadata:** tag: `SVG` | pattern: `pathLength + offsetDistance` ### Notes - `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. ### Source #### Default.svelte Source file: [src/lib/examples/motion-path/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/motion-path/demos/Default.svelte) ```svelte
// motion-path pathLength 0 → 1
({ position: 'relative' }))}> ({ stroke: 'var(--brut-accent, #247768)', strokeOpacity: 0.55 }))} initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} {transition} /> box)} initial={{ offsetDistance: '0%', scale: 2.5 }} animate={{ offsetDistance: '100%', scale: 1 }} {transition} />
path draws · box rides offset-path 4s · reverse loop
```