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.