Emoji Customizer created with CSS Variables

2 Comments on Emoji Customizer created with CSS Variables

Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer.

The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ ("\u200d") you can glue all parts together so that they become an “Emoji ZWJ Sequence”, yielding a new Emoji.

🤓 My favorite Emoji ZWJ Sequence is the Rainbow Flag (🏳️‍🌈). It literally is the combination of a white flag (🏳) and a rainbow (🌈).

💡 Using JavaScript it’s perfectly possible to spread Emoji ZWJ Sequences into their single Emoji, or even replace parts within an Emoji Sequence.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

2 Comments

  1. Pingback: What values can you put in CSS Custom Property? – Bram.us
  2. Pingback: Custom Properties as State | CSS-Tricks

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.