An Animation of Every Emoji


The Video

Download the WEBM version (19MB).

The Process

Mostly notes to myself, but I thought you lot might be interested 🙂

Get Every Emoji from Twemoji

Twitter maintain the Twemoji Project - it contains high quality SVGs of every emoji. They generously make them available under CC-BY.

But grabbing all the SVGs we want is a little tricky. GitHub don't make it easy to download a single directory - you usually have to download the entire repo, or a ZIP of all the files. I only wanted the SVGs from a specific folder.

What do we do in these situations? HACK THE MAINFRAME Cheat! Twitter has an SVN interface for compatibility reasons. We can export a specific directory using:

svn export https://github.com/twitter/twemoji/branches/gh-pages/2/svg

Convert to PNG

Next, we need to convert to PNG. We also need to resize the images because their default canvas is a miniscule 48x48px. I chose 1024x1024.

mogrify -format png -density 1024 -resize 1024x1024 *.svg

This may take a while depending on the speed of your machine.

I then moved all the PNGs to a new directory.

Rename the files

In order to turn these images into a movie, it's helpful to have them named sequentially. This is a simple(ish) one-liner which renames all the files to 0001.ext, 0002.ext, etc.

ls * | cat -n | while read i f; do mv "$f" `printf "%04d.${f#*.}" "$i"`; done

Convert to MP4

This takes a sequence of images and turns them into a 25fps MP4.

avconv -r 25 -i %04d.png EveryEmoji.mp4

Fix the MP4 and convert to other formats

...or not! For some reason, Twitter and VLC didn't like the MP4 generated by avconv so I used the ever-reliable online-convert.com to regenerate the MP4 and create a WEBM.

And then add sound

As so many people requested it...

The End

You have been visited by the chicken of blogging. May it bring you peace and happiness.

A friendly looking chicken stares at you

Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

2 thoughts on “An Animation of Every Emoji”

  1. says:

    Wouldn't it be easier just iterate over all emoji ranges using Javascript (+some tweening CSS animations) and record this instead? Or does this pose an issue when device might not recognize/display some correctly?

    Reply
    1. says:

      You mean recording the screen? That could do it - but I'm not sure it would be any easier. This process took about 5 minutes. The ranges for emoji are quite complex, especially when you start adding modifiers. But, if you think your way would work better - please go ahead and write it. I'd love to compare the two.

      Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">