DEV Community

loading...
Cover image for 100 Days of CSS Illustrations (41-50)

100 Days of CSS Illustrations (41-50)

alvaromontoro profile image Alvaro Montoro ・3 min read

With these ten cartoons, we reach the equator of the challenge! I must admit it has been tougher than initially expected... I almost stopped a few days because work was getting a bit overwhelming and I barely had time to draw anything.

Here are the 10 illustrations/drawings I did in the past 10 days. Click on the image to see the full illustration with the code, and click here to see a CodePen collection with all of the drawings plus some variations.

Day 41: Pacman pattern

This is a simple pattern in CSS: a dark background with white circles around. Let's add a box-shadow and a second background image (with conic and radial gradients) and add some movement to create a Pacman-styled animation... without using "any" HTML tag. Read here how it was done.

Animated Pacman-looking scenario with many white dots and the Pacman figure moving around

Day 42: Water bottle

An empty bottle of water.

Cartoon of an empty bottle of water

Day 43: Face/Hoodie

I tried to do something a bit more complex than before, and play with shadows. The result is not amazing, but I enjoyed drawing it. Click on the checkbox to add/remove a hoodie. And customize the drawing by changing the variables on the first lines of the CSS.

Cartoon of a person wearing a hoodie

Day 44: Tipsy

Based on Wine tasting - conclusion by Motionblurstudios on Dribbble.

Cartoon of a woman drinking wine

Day 45: Woman

Inspired by "woman wearing black crew-neck shirt" by Aiony Haust on Unsplash. This cartoon is done just using clip-paths.

Cartoon of a woman done with polygons in bright colors

Day 46: El Chapulín Colorado

A minimalist version of the Chapulín Colorado, a beloved TV character that parodied superheroes shows in the 70s.

Simple cartoon with  different shapes: a heart with the letters "CH", a rounded area that looks like a face with hair, and two antennas with pompoms at the top

Day 47: Flower pot

Today I participated in a hackathon and barely had time to do anything. I aimed for something cute and simple, but the result came up a bit basic. I would like to retry this one at a later time.

A cartoon of a flower pot with eyes, legs, and arms

Day 48: Greaser

A cartoon of a greaser (like Danny Zuko on Grease, or The Fonz <-- please let me know that you got those references, otherwise I'll feel old :P).

A cartoon of a man with a black leather jacket, a t-shirt, and a big toupe

Day 49: Whale

I really liked how this cartoon ended up. It is really simple –it only has 3 colors and 6 divs–, but it looks clean and nice.

Cartoon of a whale swimming under water

Day 50: Quixote

Don Quixote is a character from a 1605 novel (which is considered the first modern novel): The Ingenious Gentleman Don Quixote of La Mancha, by Miguel de Cervantes.

Abstract/Linear version of Don Quixote, a man with a helmet and a spear

Discussion (5)

pic
Editor guide
Collapse
karthiknayak98 profile image
KarthikNayak

What are the sources for these image? Are these your own imagination?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Some of them are based on illustrations from Dribbble. When that's the case, I add a link to the original and/or the author's page (like the wine tasting above).

Some others are from scratch, I draw them on a paper or, if I have an idea of what I want to do, I may run a quick search online to see how different designers drew it.

Collapse
karthiknayak98 profile image
KarthikNayak

Very nice. Thanks

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

These are awesome as usual! And congrats on reaching this milestone - it's so hard to keep going I know 😅 Looking forward to seeing the next batch 😊

Collapse
alvaromontoro profile image
Alvaro Montoro Author • Edited

Thank you. The support and encouragement from you and others are what made me continue (I almost dropped the ball with all the workload I've had this week)