Speckyboy Design Magazine

Show Me Emoji: Iconic Code Snippets

Emoji seems to have invaded every part of our culture. What started out as a niche feature for mobile phone users and computer geeks has become its own phenomenon. Now, we see these little characters on t-shirts, marketing campaigns and even not-so-funny feature films.

It wouldn’t be a stretch to say that emoji have become a sort-of common language. Whether you speak English, Japanese or Swahili, certain characters are just universally recognized. As such, they can break down barriers in their own, cute way.

Naturally, the web design community utilizes and experiments with emoji quite a bit. Today, we’d like to showcase some of the more interesting and fun examples from CodePen. They run the gamut from simple CSS recreations, to clever animation that brings these little guys and gals to life. Enjoy 😊

Pop the Emoji

This JavaScript-based animation is interesting enough on its own. But it’s also interactive. Moving your cursor over a face removes it from the screen, sort of like popping bubbles. Clicking on the canvas restarts the entire process.

See the Pen
gap – pure JavaScript by Toshiya Marukubo

Let the Pseudocats Teach Us

Because emoji is so universal, it makes for a great learning tool. This interactive demonstration of CSS pseudoclasses benefits from the use of helpful “pseudocats”.

See the Pen
Structural pseudocats 🐱 by wendko

Surprisingly Pure CSS

Developers are continually getting better at creating images via CSS. Here, we have a surprised-face emoji that is crisp, clean and scalable. It’s also been written with surprisingly little code.

See the Pen
Surprise face by Alexander Vega

Choose Your Critter

One of the more popular usage of emoji is in games. They make for great, easily-recognized characters while also adding fun to the mix. This particular game is similar to a slot machine. Click the “spin” button and see which cute animal you land on.

See the Pen
Emoji Spinner by Melvin Idema

Beary Cool Animation

What’s not to love about this emoji bear? It’s clearly a fun-loving animal, with sunglasses and backwards cap. It apparently writes code as well, judging from the super-cool scrolling animation in those lenses.

See the Pen
Shades Loader 🐻 by Jhey

Going Viral

Happy or not, emoji does reflect what’s happening in our society. As such, it’s no surprise that this COVID-19-inspired character has been developed. The disgruntled little virus bounces pensively, apparently wary of an inevitable cure.

See the Pen
Corona Virus SVG (Covid-19) by Sourav Pradhan

Take a Virtual Vacation in Emoji Town

One clever developer asked the question: What would an emoji town look like? The result is a fun, flat and animated world. It’s a great mix of modern technology and retro-game looks.

See the Pen
3D Emoji Town (Pure CSS) by George W. Park

Build Your Own Emoji

Not a fan of the run-of-the-mill emoji characters? Then build your own! This tool lets you choose from various skin tones, facial features and even accessories.

See the Pen
Emoji Factory by Olivia Ng

Representing All the Feels

You wonder if, thousands of years from now, archaeologists will equate emoji with ancient Egyptian hieroglyphics. Granted, emoji are probably more lighthearted and reflect modern times. But both are used to communicate a story.

Beyond those academic arguments, emoji can be just plain fun. Especially when spiced up with a little CSS and JavaScript, like the examples above. Hopefully, they’ll get give you a laugh and get your creative juices flowing.

Want to see even more cute and fun emoji snippets? Take a look at our CodePen collection!

The post Show Me Emoji: Iconic Code Snippets appeared first on Speckyboy Design Magazine.

Recent Articles: