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.
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?
@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.