8 CSS & JavaScript Snippets for Creating Hand-Drawn Elements
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.
The post 8 CSS & JavaScript Snippets for Creating Hand-Drawn Elements appeared first on Speckyboy Design Magazine.