DEV Community

Cover image for 100 Days of CSS Illustrations (31-40)
Alvaro Montoro
Alvaro Montoro

Posted on • Edited on

100 Days of CSS Illustrations (31-40)

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 31: Dragon radar

An attempt at something with a more "realistic" look. This dragon radar (from Dragon Ball) was done using different shadows, and the button animates a little when pressed.

Cartoon of a dragon radar: a rounded object with a screen showing coordinates and blinking lights

Day 32: Line house

Based on Line houses collection by Boyko on Dribbble. I liked the simplicity and elegance of the original.

Minimalistic drawing of a house using lines

Day 33: Dreaming

A cartoon from scratch that didn't know where it was going to go. As it grew, I thought about adding a book and curly hair... but it started getting too complicated so I scaled it down and had the hair fading into the background.

Cartoon of a woman with the eyes closed, her hair fades with the background

Day 34: Rainbow cat

This animated (and equals part hypnotizing, creepy, and mysterious) illustration is based on "Rainbow Cat" by Ryan Feerer on Dribbble.

Animation of a cat with a rainbow coming out of its mouth

Day 35: Coffee

Just a cup of coffee drawn with the letters of the word "coffee," and with a small blend mode for the coffee top.

illustration with the word coffee displayed in a way to look like a coffee cup... trust me, not my best work... some days are good, some days are bad, and today was a bad cartoon day... but it can be a good day for you! I'll send a DEV gift card to the first person that leaves the comment

Day 36: Elephant

Linear drawings are 1,000 times easier using SVG (with paths) than just using CSS, and the result is always smoother as the connections are perfect (because there are no connections, it's all a single line.)

Minimalistic drawing of an elephant

Day 37: Rooster of Barcelos

The Rooster of Barcelos is one of Portugal's traditional symbols. It is part of a legend in which a dead rooster miraculously saves a man's life. All the dots were placed manually in a single box-shadow.

Cartoon of a rooster of Barcelos, a small figure with bright colors that depicts a rooster

Day 38: Warrior

Based on Warrier - illustration by Boyko on Dribbble. I liked the simplicity of the original, which actually translated into simplicity in HTML too (just 6 elements).

Cartoon showing an ancient bearded warrior holding a shield and a spear

Day 39: Dipper Pines

A CSS adaptation of the character Dipper Pines (from Gravity Falls). One day I'll do a full version of this instead of only the upper body.

Cartoon of Dipper from Gravity Falls, with the text Dipper Pines underneath it

Day 40: Back to school

Another cartoon from scratch. This time to celebrate that the kids are back to school... maybe I should make a 2020 edition with the kid wearing a mask :P

Cartoon of a boy smiling while holding a giant pencil

Top comments (3)

Collapse
 
makneta profile image
Magda Rosłaniec

They are really impressive.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks :)

Collapse
 
aulerien profile image
Aulerien

Good Job