Type in Motion
01Live

Text Outline Morph

SVG · Morph

Demo

Text Outline Morph

Commentary

Morphing Between Glyphs

Text outline morphing sounds complex but the key insight is simple: SVG paths are just arrays of numbers. Interpolate those numbers and you get a smooth morph. The tricky part is ensuring both paths have the same number of points.

Point Normalization

I sample both source and target paths at equal arc-length intervals to get matching point counts. Then GSAP handles the interpolation. The result is a morph that feels organic because it follows the actual contour of each letterform rather than just scaling or fading.