[OTVar] Animation of symbols/emoji using CSS animation with variable fonts

Laurence Penney
Laurence Penney Posts: 50
edited November 2017 in Font Technology
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.
SaveSave
Tagged:

Comments

  • Nick Shinn
    Nick Shinn Posts: 2,270
    Sound and color?
  • Ofir Shavit
    Ofir Shavit Posts: 397
    edited June 2017
    Very nice!

    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)?
  • Deleted Account
    Deleted Account Posts: 739
    Nice work! 

    Now the horse has left the varn, do you know the per mille distance of a single stride length? 
  • Laurence Penney
    Laurence Penney Posts: 50
    edited June 2017
    Ofir: Most of the time was spent manually tracing vector outlines from the individual frames in Muybridge’s images. I traced them directly in Glyphs, using straight lines only to save time, making a new brace layer for each key frame. You have to ensure outline compatibility of all frames, which rules out autotrace. If I needed an extra point to vectorize one frame, I had to add the point in all frames. I ended up with one contour of 106 points, and along the way learned quite a lot about horse anatomy. If I did it again I’d make each leg a separate contour. In total it was around 4 hours work. Once the frames were in place in Glyphs, the brace layers needed to be named correctly, and the font exported as a GX font.

    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.
  • Laurence Penney
    Laurence Penney Posts: 50

Categories