DEV Community

loading...
Cover image for 100 Days of CSS Illustrations (81-90)

100 Days of CSS Illustrations (81-90)

alvaromontoro profile image Alvaro Montoro ・4 min read

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.

This is the first batch of drawings for which all the illustrations have videos on how they were done. To see more of these videos, subscribe to my Youtube channel.

Day 81: Coffee in the snow

Inspired by "Winter Outfits - Vector Illustration" by Hadi Kurnia on Dribbble... I liked the idea of doing something like that, then built if from zero inspired by that illustration... and a video of how it was done.

Cartoon of a person wearing winter clothes and holding a coffee paper cup. In the background there's snow and icy mountains

Day 82: Little Monster

A new Halloween-y cartoon done from scratch. Here is the video of how the illustration was drawn.

Cartoon of a smiling monster with a big head/body, one eye only, no arms, two legs, and two horns

Day 83: Man's face

Another drawing that was done from the ground up. This is how the illustration was drawn.

Cartoon of a bearded man with green eyes

Day 84: Woman and leaf

Inspired on Unused proposal by Bujar Ljubovci on Dribbble, this illustration is only 3 div's (and could be easily reduced to 2). I uploaded a video on Youtube with how it was done.

Logo with a woman with her eyes closed holding leaves

Day 85: Cartoon character (v3)

Another cartoon character from zero. This one has a style that vaguely reminds me of Archie (the old one)... although not on purpose... and another illustration with a "behind-the-scenes" video.

Cartoon of a person with glasses smiling

Day 86: Person coding (v2)

Initially, I thought about doing a drawing based on Pacifica Northwest, but then I realized that I was running out of time and hurried things up into something that is "a bit" rough around the edges... And a video of how it was done

Person smiling while using a laptop

Day 87: Butterfly

This illustration started as a comment on Youtube, but I must say I really enjoyed drawing this butterfly...
and I created another video on how it was coded.

Cartoon of a butterfly with lines and dots

Day 88: CSS Witch

It is Halloween night, so I decided to do another Halloween-styled cartoon: a wicked witch. This cartoon took a little bit longer to do, so I have two video versions: a long one and a short one.

A smiling witch with green skin with a pointy hat holding a broom

Day 89: La Muerte

After doing some Halloween illustrations, it felt good to do a Día de Los Muertos one too. This version of La Muerte was inspired by one from the movie "The Book of Life". As with the other images, there's a video on how it was done.

Cartoon of La Muerte, a traditional Mexican figure associated with the Day of the Dead

Day 90: Rabbit in the Hat

I must admit today's animation/drawing is a bit simplistic, but today (and probably tomorrow) I won't have much time so they will be fairly simple. Still, here there's a video of how it was done

Really simple illustration of a top hat with bunny ears poking out

Extra: ambigram

An attempt at doing an ambigram with my name (Alvaro.) It is rough around the edges, but it kind of works: if you rotate the image 180 degrees, it will still read the word Alvaro:

Ambigram for the word Alvaro

Discussion

pic
Editor guide
Collapse
kerimdragolj profile image
Kerim Dragolj

WOW! damn you are good! you should make udemy course, youtube channel or something, I would definetly buy it. I know you have channel but I meant more of educational one, where you would explain and teach the stuff you do. I'm just imagining combining all this stuff with animations, transition/transform, js... wanna try it all :D

Collapse
winstonpuckett profile image
Winston Puckett

This is amazing. Also I love the gravity falls reference

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! If you like Gravity Falls, day 39 was CSS Dipper:

Collapse
devworkssimone profile image
DevWorksSimone

Great work I would like to be' able to draw as good... to bad i suck at it by hand too 😂