This animation uses a variable font that contains a single character, the emoji horse 🐎 U+1F40E which maps to the single glyph in the font. The glyph consists of a default shape of around 100 control points, plus 15 “delta sets”, each of which is a kind of “key frame” stored as a set of 100 [dx,dy] offset pairs with a position on the TIME axis. CSS font-variation-settings is able to choose any position on the TIME axis, including positions between the delta-sets. Settings between the “key frames” are interpolated by the font variation engine, giving smooth motion, not limited to the frames.
Edit the “0.6s” period in the
animation CSS to speed up or slow down the horse.
The source images are photographs by Eadweard Muybridge from around 1880. Muybridge was a pioneer in the history of film. His fascinating life and times are brought to life in the superb biography River of Shadows by Rebecca Solnit.