8 Beautiful CSS & JavaScript Code Snippets for Enhancing Illustration

By Focusoncode June 28, 2018

Illustrations can convey a highly-artistic model to any website. Whether or not hand-drawn or created digitally, these photos may help us inform a story and convey concepts. By itself, an excellent illustration might be fairly highly effective stuff. However, with slightly magic, we can provide them a fair higher influence.

Through the use of CSS and JavaScript, illustrations can be both animated and interactive. They can go from static pieces of a story to central elements. Below is a collection of snippets that take the illustration to the next level.

Quadtree Reveal

See the Pen Rosé by Gabriel Cyrillo (@gcyrillo) on CodePen.

Quadtrees are a fascinating idea (don’t fear, I needed to look them up). Primarily, they’re a tree information construction the place every node has 4 youngsters. Gabriel Cyrillo took this precept and turned his self-portrait into an animated masterpiece. The impact is gorgeous and the color palette is editable by way of JS.

Interactive Gentle

See the Pen Drawing with CSS3 mix-blend-mode by Yasunobu Ikeda a.k.a @clockmaker (@clockmaker) on CodePen.

Not all illustration has to depict a specific topic. They’ll additionally include pure randomness. Here’s a fascinating interactive drawing function that, because the person drags the canvas, produces a pulsing mixture of squiggly traces and animated gentle results.

Not Your Commonplace Format

See the Pen Illustration brought to life by Waldo Broodryk (@waldo) on CodePen.

This instance takes what would ordinarily be an easy and engaging graphic and turns it into an attention-grabbing multipart animation. The weather of this website wireframe is“drawn” on the display and comprise each clickable hyperlinks and hover results. This empowers the person to turn out to be a part of the story.

Worms!

See the Pen Interactive Illustration via Snap by CJ Gammon (@cjgammon) on CodePen.

Right here we have now an interactive illustration that’s paying homage to a youngsters’ board sport. Hovering over the varied dots alongside the trail reveal worm-like creatures that pop up and present their faces. Fairly enjoyable and kooky.

Moving Parts

See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.

This one is quite amazing on several levels. It’s a multi-layered parallax scrolling effect that turns an ordinary page header into more of an interactive storybook. The effects are compelling, but the grungy, uneven bottom border really makes this look like a singular piece of art.

A Change in Perspective

See the Pen Social Media Illustration by Mohan Khadka (@khadkamhn) on CodePen.

Designer Mohan Khadka used an illustration to create an interactive layout where users can connect with him on various social media platforms. But the real treat here is the “My Screen” toggle in the upper left that shifts the perspective to see what’s on his imagined laptop’s screen. It’s this extra step that makes it stand out.

The Illustrated City

See the Pen City Illustration by Lisi (@lisilinhart) on CodePen.

This fun drawing of a city skyline offers up some practical examples of interactivity. Hovering on a building (or the Ferris wheel) results in that object being colored in. These elements can also be made clickable, which could be very useful for a drawing of a convention center or concert venue. The concepts used here can create a user-friendly UI in a number of different situations.

Structural Diagram

See the Pen illustrating the structure of a ☯ symbol (SVG) by Ana Tudor (@thebabydino) on CodePen.

While there’s no interactivity to this diagram of the “Yin and Yang” symbol, it does bring up an important point about illustration. We often use these types of images to share relevant information, but we don’t always use the best image formats. But, since designer Ana Tudor used SVG in this example, the whole thing scales beautifully. This enables users to take a closer look to view the details. And it uses standard HTML text, which makes it more accessible.

Share This

Leave a Comment

Your email address will not be published.