DEV Community

Cover image for 100 Days of CSS Illustrations (41-50)
Alvaro Montoro
Alvaro Montoro Subscriber

Posted on

30 13

100 Days of CSS Illustrations (41-50)

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

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (5)

Collapse
 
karthiknayak98 profile image
KarthikNayak

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

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

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 • 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)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay