I thought people might be interested in this animation I put together (based on photographs by Eadweard Muybridge
) to understand how efficent it can be with variable fonts and CSS animation. Variable browsers only!
Those without a variable browser can see the effect here:
The horse is a single glyph, composed of 16 key frames, each traced manually from Muybridge’s photographs and saved as two masters and 14 brace layers (intermediate masters) in Glyphs. It’s then exported as a variable TrueType font and converted to WOFF2, resulting in a tiny file of 3960 bytes. The variable technology inside MacOS and Safari provides the in-between instances to make it smooth. The HTML <body> simply contains a single horse emoji glyph:
Finally, CSS animation gets the horse moving with a minimum of code.