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!
http://www.axis-praxis.org/playground/horse/
Those without a variable browser can see the effect here:
https://twitter.com/axis_praxis/status/872443008599326720
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.
Finally, CSS animation gets the horse moving with a minimum of code.