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
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.
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.
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.
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.
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.
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.
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.
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.
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- Forge Your Own (Animation) Path with These Snippets