Code is often utilized to produce technologically advanced aesthetic features. That makes perfect sense, given cutting-edge CSS/JavaScript approaches have a natural affinity towards a future outlook. What if, though, we aimed for a more classic, hand-drawn appearance in our creation?
It turns out that when you combine coding with hand-drawn components, you can create some quite remarkable results. By using SVG animation, for instance, you may make it seem like the element is being “drawn” in real-time. Alternatively, you might give a more contemporary work the feel of a sketch. The horizon is infinite.
Today, we’ll demonstrate how to improve genuine or fake hand-drawn parts using code. Enjoy!
Szenia Zadvornykh’s On Looking Into a Crowd
Sitting on a bench in the midst of a busy metropolis to watch this animation is an evocative experience. A wide cast of oddballs strolls about at a steady clip. The use of JavaScript gives life to these static pictures.
See the Pen Crowd Simulator by Szenia Zadvornykh (@zadvorsky) on CodePen.
Outstanding Flow by Daniel
Daniel’s Flow Fields Are Out of This World! Flow fields are a generative, grid-based art form that allows for some breathtaking creations. High-detail artworks that seem to have been drawn by hand. This code sample includes an adjustment window where you may change the backdrop colour, the animation speed, and other parameters.
See the Pen Flow Field Drawing by Daniel (@scorch) on CodePen.
Sarah Drasner’s Mostly Useless Drawings
Here’s a hilarious cartoon where commonplace items form the word “Useless.” The name is a little misleading, since this code sample demonstrates how the GSAP library may be used to improve visuals.
See the Pen A Tribute to the Useless Web by Sarah Drasner (@sdras) on CodePen.
Josetxu’s Menu, Written in Chalk
You’ve probably seen the understated beauty of a blackboard menu at your favourite coffee shop or café. It might become a little chaotic at times, but it’s always got plenty of tasty goodies to offer. This fragment, with its hand-drawn fonts and unique borders, will add the same kind of warmth to your computer screen.
See the Pen Cafe Menu Layout by Josetxu (@josetxu) on CodePen.
Sign Your Name With Flavor Roblewsky, Craig
It’s common practise to utilise animated handwritten writing as a means of giving a design a personal touch. The fun factor is increased thanks to this tool, which includes a hand symbol and other customizable options.
See the Pen Animated handwriting with DrawSVG (GSAP3) by Craig Roblewsky (@PointC) on CodePen.
Inspiring Wall Artwork by ilithya
This digital painting evokes a modern-day Yellow Submarine animation. It’s hard to miss, what with all those cheerful hues and soothing animations. The fact that it is entirely CSS-based is even more stunning.
See the Pen Multi-Screen Mural for JSConf EU 2019 by ilithya (@ilithya) on CodePen.
Original 404 drawing by Sarah Frisk
You may have fun with your 404 page, as this excerpt demonstrates. A zany extraterrestrial is sketched in crayon style. After that, there’s some jerky CSS animation that gives it an amateurish feel.
See the Pen 404: Players Not Found by Sarah Frisk (@sfrisk) on CodePen.
Gemma Stiles’s Draw It Yourself
When you want something to seem like it was done by hand, nothing beats an Etch a Sketch. If you can get the hang of the toy’s unusual controls, you’ll be able to create some really remarkable artwork. In this case, you may play a web-based version by navigating with the cursor keys on your keyboard. And rather of shaking the device, you’ll press the “CLEAR” button and begin over. Anyone, regardless of artistic skill, should be able to come up with some entertaining block letters.
See the Pen Etch A Sketch 🖌 by Gemma Croad (@GemmaCroad) on CodePen.
An Intersection of Two Distinct Art Forms
You are an artist whether your medium of choice is pen and paper or the keyboard. After all, both provide great opportunities to let your imagination run wild.
Additionally, despite the fact that these two types of art need quite distinct skill sets, they complement one another very effectively. As the aforementioned code snippets demonstrate, computer programming may add depth to traditionally created graphics. Adding in elements of motion, interaction, and other special effects improves the overall quality of the experience.
Do you want to learn more about the connection between code and hand-drawn components? If you want to learn more, please see our CodePen repository.
Image by pikisuperstar on Freepik