An Animation of Every Emoji

by @edent | # # # # # | 2 comments | Read ~433 times.

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

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 1024×1024.

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 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

2 thoughts on “An Animation of Every Emoji

  1. dusoft 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?

    1. @edent 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.

Leave a Reply

Your email address will not be published. Required fields are marked *