Path Morphing | Svelte Motion

FIG-001/ SVG

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.

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.

↩ all examples

pattern · flubber + useTransform mode · live running source

category · svg

sheet · sheet 01 / 01

⟳ to re-run