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.
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
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
We hope you enjoyed this new spin on ASCII artwork! If you want even more unique examples, please do check out our CodePen collection.
- Code Snippets That Demonstrate the Repelling Effect in Web Design
- Attack of the Blob-Based Animated Backgrounds in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- Forge Your Own (Animation) Path with These Snippets
- 8 CSS Snippets for Creative Hyperlink Hover Effects
- 8 CSS & JS Snippets for Creating Pixelated Backgrounds