user profile image

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.

Comments

  1. This is fantastic. Absolutely fantastic!

    Nice one.

    Any idea how it might be refactored for Safari?

  2. It works very well in Safari on macOS 10.13 and iOS 11. Unfortunately Apple has disabled Safari’s support for variable fonts in earlier macOS releases.

  3. Hello everyone if you are connect the one single use of the same user are apply the more time and connect the more time firefox free download this is the perfect for the new web user.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...