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.
Speaking of efficiency, how much time does it take to create such one glyph variable font (16 key frames), provided you have one ready vector object (horse or anything else)?
Now the horse has left the varn, do you know the per mille distance of a single stride length?
David: It would be nice to encode displacement in the font. It’s about 130 font units per key frame, or 1950 units (15 * 130) per cycle. Do you know of a neat method to do that? Advance width? Advance width when a stylistic set is active?
Nick: Watch this space.