# Path Morphing
> Interactive path morphing animation using SVG shape interpolation with Svelte Motion.
**Source:** [https://motion.svelte.page/examples/path-morphing](https://motion.svelte.page/examples/path-morphing)
**Markdown mirror:** [https://motion.svelte.page/examples/path-morphing.md](https://motion.svelte.page/examples/path-morphing.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: morphing svg paths.
Six icons morphing one into the next on a loop. flubber pre-computes a tween between each adjacent pair; `useTransform` reads a single progress motion value and routes to whichever interpolator is active.
**Metadata:** tag: `SVG` | pattern: `flubber + useTransform`
### Notes
- Six SVG paths, plus lightning repeated at the end so the loop is seamless. `flubber.interpolate(a, b)` precomputes the segment-matched tween between each adjacent pair once — flubber is expensive per-call, so we never recompute mid-flight.
- One `useMotionValue(0)` drives the whole loop. `useTransform` reads its value: integer part = which interpolator, fractional part = where in the tween. The path string is recomputed every frame from those two pieces.
- `animate(0, target)` walks the motion value imperatively; `onComplete` advances `pathIndex` and the `$effect` picks up the next leg. `onDestroy` stops the in-flight animation so unmount can't strand the value.
### Source
#### Default.svelte
Source file: [src/lib/examples/path-morphing/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/path-morphing/demos/Default.svelte)
```svelte
```