← Playground

Cursive Signature

My name, written out in cursive two ways: by Rust compiled to WebAssembly, and by a Lottie animation played with lottie-react. Switch between them.

Loading WebAssembly…

Each letter is a set of bezier outlines, baked into the module from an open-licensed script font. Rust flattens them into polylines once and measures their lengths. For any moment in the animation it returns the first part of each outline, which is what a Trim Paths animation does in After Effects, plus how far the fill has faded in. The page reads those points straight out of WebAssembly's memory and draws them on a canvas.

The Rust engine has no animation file: its timing is a few constants in the Rust source (about 200 lines, no dependencies). The Lottie engine plays a JSON file of shape layers with Trim Paths, the same structure Bodymovin exports from After Effects, so a hand-animated export can replace it. Both come from the same outlines, generated from an open-licensed script font by a script in the repo. Both follow the site theme, and with reduced motion on they show the finished name instead of writing it.