Index Ten parts, meant front to back. It starts at what a shape is to a computer and ends with enough to go and build this yourself. If you have written an SVG path by hand before, start at Part 2.
Length About 71 minutes end to end. Assumes HTML and CSS, and a little JavaScript. Teaches SVG path syntax, Bézier curves and the geometry, all from nothing. 0 What morphing is Why a crossfade is not a morph, and why the difference is visible. Reading time 4 min 1 What a shape is to a computer How to read a path by eye, and why straight lines get stored as curves. Reading time 8 min 2 Why this is hard Every approach to morphing recovers, from geometry alone, a decision you made from meaning. Reading time 6 min 3 The two answers The fork every morphing library stands on, and what each side costs. Reading time 6 min 4 The rig How to write correspondence down so no solver is needed. Reading time 4 min 5 Parking Where a spare stroke goes, and why hiding it under another is not enough. Reading time 3 min 6 Rotation Why the obvious interpolation collapses an arrow, and what to do instead. Reading time 4 min 7 What browsers will do What actually animates where, including the one browser that refuses. Reading time 6 min 8 When it looks bad Two numbers that tell a good morph from a bad one before a user sees it. Reading time 7 min 9 Build your own Enough to go and build this yourself, in the order that works. Reading time 4 min
Appendix Detail that would have interrupted the argument, and the practical how-to pages. Nothing here is needed to follow the manual.
Command structure Why every icon in a rig must serialise identically, and what breaks when it does not. Read this if a morph swaps instantly instead of animatingRigid motion Sharing one rotation across an icon, and the transport that keeps it rigid. Read this if an icon turns in pieces when it should turn as one objectAuthoring a rig Writing slots by hand, and the invariants that are checked for you. Read this if you are drawing the icons yourselfImporting icons Turning Lucide, Tabler or your own paths into a rig. Read this if you are pulling icons from a library rather than drawing themFixing correspondence When the pairing is wrong, how to see it and how to commit the correction. Read this if it animates, but the wrong stroke goes to the wrong placeCompile a toggle From a pair of icon names to a stylesheet with no JavaScript. Read this if you want the zero-JavaScript version working todayThe vanilla driver Driving a morph with no framework, and what interruption costs. Read this if you need reversing, interruption or scrubbingThe React component Uncontrolled, controlled and imperative, and when each one fits. Read this if you are in ReactScrubbing and gestures Owning progress yourself, for drags, scroll and anything else. Read this if a drag or a scroll position should drive the morphAccessibility and motion Sensible defaults, and what reduced motion does. Read this if before you ship any of itThanks for reading What you know now, and the one sentence worth keeping.