DEV Community

Cover image for 100 Days of CSS Illustrations (51-60)
Alvaro Montoro
Alvaro Montoro

Posted on

100 Days of CSS Illustrations (51-60)

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 51: Yeti

A version of a Yeti that I drew for a game a long time ago and that I never ended up publishing.

Cartoon with a big smiley ape-ish monster

Day 52: Demon

I was about to get to 666 followers on Codepen, so original-me decided to do a cartoon depicting a demon.

Cartoon depicting the upper body of a red demon with horns, triangular eyes, big muscles, and a tail

Day 53: Puppy

When I started drawing this cartoon from scratch, it soon started looking like Sonic the Hedgehog... so I modified it a little and made it into a dog. Here is a video of how it was done.

Cartoon of a puppy with big eyes and big ears

Day 54: Person wearing an HTML t-shirt

I published this one a day ahead, and had little time to do it. Still the result is decent. I recorded the process from this one too and shared it on Youtube.

Cartoon of a young person wearing a t-shirt with the text "HTML"

Day 55: Koi fish

This cartoon is based on this drawing on the Pinterest page of Urban Threads. I really liked the simplicity of the drawing, and I like these colored fish.

Cartoon of a koi done with lines

Day 56: Peter Griffin

Minimalist version of Peter Griffin, a character from the TV show Family Guy.

Minimalist cartoon of Peter Griffin from Family Guy

Day 57: Bicycle

Based on "M is for Motion" by Andrew Pons for Big Vision on Dribble. As this illustration uses conic gradient, it won't be exactly the same on Firefox.

Cartoon of a bicycle in motion

Day 58: CSS Mafalda

Quino was one of the edgiest and most inspiring cartoonists of the Spanish language. He passed away on 09/30/2020. Mafalda is one of his most beloved characters.

Cartoon of Mafalda, a little girl wearing a dress and a bow on her head

Day 59: Superman/Clark Kent

Place the mouse over Superman so the drawing will change colors and shapes, and transition into Clark Kent. I recorded how it was developed, and it can be watched on Youtube.

Cartoon of a superman-looking superhero with tights, a cape, and a big logo with an S

Day 60: Missing summer

I wanted to do a landscape for a while. This one is a bit simple (only 6 divs) and it includes a soothing wave animation.

Cartoon of a beach with a sunset, and an umbrella open on the sand

Top comments (5)

raunakhajela profile image
Raunak Hajela

Thanks @Alvaro for sharing. This is really an amazing work. You motivated me and now I am going to try the same :)

s_aitchison profile image
Suzanne Aitchison

Yay! Can't wait to see what you make!

alvaromontoro profile image
Alvaro Montoro

Thanks! And please, share what you do! I always enjoy seeing what others do (in fact, it was @s_aitchison 's challenge and illustrations that motivated me to go for this one)

coopercodes profile image
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

This is some awesome work!
Iโ€™ve only just started with CSS Art and finished my first piece.

Iโ€™d love to know any pointers you had? SVG is next on the list to learn.

alvaromontoro profile image
Alvaro Montoro


Aunque me quedan alguno mรกs que 9... me faltan 40... ๐Ÿ˜ฌ