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

Posted on by:

alvaromontoro profile

Alvaro Montoro

@alvaromontoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🤘

Discussion

pic
Editor guide
 

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

 

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.

 

Very nice. Thanks

 

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 😊

 

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)