Emoji Compositions β€” Create your own emoji by combining existing ones (πŸ‘±β€β™‚οΈ + 🎩 + πŸ”Ž = …)

Last Friday Max Lynch sent out this tweet:

Inspired by an idea that first came to my mind after seeing these emoji compositions using the 😎 emoji, I quickly replied that it’d be perfectly possible to (visually) create this new emoji by using a combination of the existing πŸ‘¨, 🎩, and πŸ”Ž emojis.

Not soon thereafter I quickly knocked on up on codepen:

At the base is one <span> element that contains the πŸ‘¨ emoji. Using ::before and ::after I then inject the 🎩 and πŸ”Ž emojis and position them absolutely on top of the πŸ‘¨ emoji.

And then … I got distracted. And created some more compositions:

Due to the fact that I’m using ::before and ::after here, I’m limited to only two β€œdecorations” per base emoji. Next to positioning the emojis some also got rotated, flipped, or even clipped to form a better match. I’m especially happy with the β€œcool lisping geek” and β€œsmoking king” ones πŸ™‚

Do note that this will only work on macOS/iOS as other platforms use other emojis. If you’re on another platform, be sure to check out the reference image.

Original Content ,

Leave a Reply

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.