We often see code used to create high-tech design elements. That makes sense, as there is a natural correlation between the latest CSS/JavaScript techniques and a futuristic vision. But what if we wanted to create something with a more traditional, hand-drawn look?

As it turns out, you can accomplish some pretty amazing things when combining code and hand-drawn elements. For instance, you might use SVG animation to make it appear that the element is being “drawn” in real-time. Or you can add a touch of sketch art to something more modern. The sky is the limit.

Today, we’ll show you some examples of how hand-drawn elements (authentic or simulated) can be enhanced through code. Enjoy!

Crowd Watching by Szenia Zadvornykh

Watching this animation is reminiscent of sitting on a bench in the middle of a crowded city. Various quirky characters walk about at a healthy pace. The use of JavaScript turns this collection of illustrations into a moving piece of art.

See the Pen Crowd Simulator by Szenia Zadvornykh

Outstanding Flow by Daniel

Flow fields are a type of generative, grid-based art that allows for some stunning creations. Highly-detailed works that look as though someone spent hours drawing each and every stroke by hand. This snippet features a control panel that enables you to tweak background color, speed, and more.

See the Pen Flow Field Drawing by Daniel

Not-so-Useless Sketches by Sarah Drasner

Here’s a fun animated drawing that uses everyday objects to spell out the word “Useless.” It’s a bit of a misnomer, as this snippet is a great example of how the GSAP library can be used to enhance artwork.

See the Pen A Tribute to the Useless Web by Sarah Drasner

Chalkboard Menu by Josetxu

If you have a favorite coffee shop or café, chances are you’ve witnessed the casual elegance of a chalkboard menu. Sometimes a bit messy, but always filled with good stuff. This snippet brings a similar charm to your screen, complete with hand-drawn fonts and funky borders.

See the Pen Cafe Menu Layout by Josetxu

Write Your Name in Style Craig Roblewsky

Handwritten text animations are among the more popular use cases for adding character to a design. This tool makes it even more fun by adding a hand icon (which can be turned off), along with a number of settings to tweak.

See the Pen Animated handwriting with DrawSVG (GSAP3) by Craig Roblewsky

A Moving Mural by ilithya

This virtual mural is like a Yellow Submarine cartoon for the modern age. With bright colors and gentle animations, it’s definitely an attention-getter. Even more impressive is that it’s built with pure CSS.

See the Pen Multi-Screen Mural for JSConf EU 2019 by ilithya

Hand-Drawn 404 by Sarah Frisk

As this snippet proves, there’s nothing wrong with having a little fun on your 404 page. A silly alien character is drawn with crayon-like strokes. From there, it features a choppy CSS animation that brings a bit of a homemade vibe.

See the Pen 404:Players Not Found by Sarah Frisk

Draw It Yourself by Gemma Stiles

Nothing says “hand-drawn” quite like the Etch a Sketch. Master the classic toy’s unorthodox knobs, and you can draw something incredible. Here, an online version works by using your keyboard’s arrow keys. Oh, and you’ll hit the “CLEAR” button instead of shaking to start over. Even if you’re not a great artist, you should be able to create some fun block lettering.

See the Pen Etch A Sketch 🖌 by Gemma Stiles

Two Diverse Artforms Coming Together

Whether you’re into drawing, coding, or both – you’re an artist. After all, each allows you to express your creativity in exciting ways.

And, even though these two artforms require vastly different skillsets, they go together quite well. The snippets above are proof that code can bring a new dimension to hand-drawn elements. Movement, interactivity, and other special effects work to enhance the experience.

Want to dig deeper into the intersection of hand-drawn elements and code? Check out our CodePen collection for more.