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.

1. 0What morphing isWhy a crossfade is not a morph, and why the difference is visible.
2. 1What a shape is to a computerHow to read a path by eye, and why straight lines get stored as curves.
3. 2Why this is hardWhich stroke becomes which stroke, and how many ways there are to be wrong.
4. 3The two answersThe fork every morphing library stands on, and what each side costs.
5. 4The rigHow to write correspondence down so no solver is needed.
6. 5ParkingWhere a spare stroke goes, and why hiding it under another is not enough.
7. 6RotationWhy the obvious interpolation collapses an arrow, and what to do instead.
8. 7What browsers will doWhat actually animates where, including the one browser that refuses.
9. 8When it looks badTwo numbers that tell a good morph from a bad one before a user sees it.
10. 9Build your ownEnough to go and build this yourself, and where the code already is.

Appendix

Detail that would have interrupted the argument, and the practical how-to pages. Nothing here is needed to follow the book.

• Command structureWhy every icon in a rig must serialise identically, and what breaks when it does not.
• Rigid motionSharing one rotation across an icon, and the transport that keeps it rigid.
• Authoring a rigWriting slots by hand, and the invariants that are checked for you.
• Importing iconsTurning Lucide, Tabler or your own paths into a rig.
• Fixing correspondenceWhen the pairing is wrong, how to see it and how to commit the correction.
• Compile a toggleFrom a pair of icon names to a stylesheet with no JavaScript.
• The vanilla driverDriving a morph with no framework, and what interruption costs.
• The React componentUncontrolled, controlled and imperative, and when each one fits.
• Scrubbing and gesturesOwning progress yourself, for drags, scroll and anything else.
• Accessibility and motionSensible defaults, and what reduced motion does.
• Thanks for readingWhat you know now, and the one sentence worth keeping.