Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Fullstack Developer

100 Days of CSS Illustrations (41-50)

css art html showdev

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

Article originally published on