8 CSS & JavaScript for Creating Stunning ASCII Artwork

If you’re of a certain age, you may remember a time when ASCII ruled the internet. Before snarky memes or even the widespread use of animated GIFs, ASCII artwork was passed around like a bowl of candy.

Some background:ASCII (American Standard Code for Information Interchange) is a standard way to encode the text characters seen on electronic devices. Letters, numbers, and all manner of various symbols can be displayed via the format.

Early communication on the internet was text-based. As such, people with way too much time on their hands had a little fun with these assorted characters. Some truly clever artwork was created and routinely shared in newsgroups, bulletin boards and email. It could be impressive, particularly when you consider the technological limitations.

Some very creative developers haven’t forgotten ASCII art. In fact, they’ve used the latest CSS and JavaScript techniques to add movement and other enhancements.

Want proof? That’s why we’re here! Take a look at our collection of code snippets that add a modern touch to an old-school artform.

Trippy Text by Angela Galliat

We’ve seen some pretty far-out textures over the years. But this ASCII-meets-acid-trip text shader is among the most mesmerizing.

Characters seemingly melt into each other within a cluster of rainbows. You may need to take a walk outside after viewing this one.

See the Pen Ascii Text Shader (single text element, no canvas) by Angela Galliat

Delicious Donut by Housamz

Bringing an element of 3D to simple characters is a challenge. That this rotating donut is able to pull off the effect speaks to the power of CSS and JavaScript.

Even better is that the JavaScript source code is itself donut-shaped. That’s a level of dedication not seen since Homer Simpson.

See the Pen JavaScript Donut – ASCII Art by Housamz

ASCII Yourself by Tamino Martinius

Original creations are cool and all, but what about the ability to turn an image into ASCII? That’s what this art generator does.

Paste in the URL of an image, and you’ll see it rendered in character output. Adjust the sliders to add your own personal touch.

See the Pen ASCII Art Generator by Tamino Martinius

CSS Trickery by Tom Lutzenberger

While this snippet isn’t traditional ASCII art, it simulates the effect quite well. By utilizing CSS background-clip, a layer of characters is placed on top of a standard image.

The result is a quick-and-dirty image effect. Bonus points for the ability to change the characters in the HTML to whatever you want.

See the Pen Pseudo ASCII-Art by Tom Lutzenberger

Around the World by thykka

This spinning globe features a beautiful retro look. Seriously, it looks like something out of an 80s arcade game.

The three.js technology behind this beauty is anything-but-old, however. The animation is smooth and the colors vibrant.

See the Pen Rotating ASCII Globe by thykka

Flipping Awesome Animation by Takane Ichinose

While ASCII art can be incredibly intricate, there are times when simple is better. This snippet features just a small collection of characters, but is still effective in getting its message across.

By the way, that message is for you to flip a table. Click anywhere within the presentation to do so. Now, don’t you feel better?

See the Pen CSS Only ASCII Table Flip by Takane Ichinose

Lego Characters by Praveen Puglia

Here’s a unique way to leverage ASCII characters. This snippet takes an ASCII input pattern and outputs them like Lego blocks.

Add your own characters to the textarea, click the button and see your new creation.

See the Pen Legoscii! by Praveen Puglia

Characters Flying through the Air by Dave Kwiatkowski

At its core, this 3D animation is a collection of characters. But it’s also quite stunning to watch.

Notice the use of color and sizing to create the illusion of space. Larger and brighter colors are the “closest,” while the smaller and darker ones hang out in the back.

See the Pen The ASCII Galaxy by Dave Kwiatkowski

Adding Cool Characters to Web Design

What the snippets above show is that, in the right hands, even text can become art. They’re also a reminder of how CSS and JavaScript can breathe life into virtually any project. Put the two together, and you have something fun and, at times, a bit jaw-dropping.