DEV Community

loading...
Cover image for 100 Days of CSS Illustrations (1-10)

100 Days of CSS Illustrations (1-10)

alvaromontoro profile image Alvaro Montoro ・3 min read

As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. Today marks a milestone: the 10th day, so I decided to share the ones I've done so far (and to show off a little, I am really proud of some of them 😊)

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 1: Shark

This one was done from scratch as part of a CSS game I did last week, and it is the one that triggered the whole drawing project idea.

Shark cartoon

Day 2: Person thinking

This one, like some others from the list, is inspired/based on an illustration from Dribbble. In particular, this one is inspired by Faces by Olga Semklo.

Person thinking cartoon

Day 3: Hummingbird

Another one from Dribbble. This was inspired by Ivan Bobrov's hummingbirds on Dribbble (this and this). And as a challenge, I used only semicircles (although I cheated a by stretching them a little.)

Hummingbird cartoon

Day 4: Face

This cartoon is from scratch and I really like how it turned out, with the condescending look and smirk.

Man with mustache smiling

Day 5: Monster with balloon

Another one from scratch. This one was based on a series of cartoons I did for my daughter 5-6 years ago.

Red monster holding a balloon

Day 6: Ace Ventura caricature

And yet another from scratch. This one I started doodling without a clear goal, then the idea of making an Ace Ventura caricature popped up, but I wasn't able to get a good expression.

Ace Ventura caricature

Day 7: Minimalist Dog

Based on Coffee Dog by Ahsan Kahn on Dribbble. I added some ears, but I didn't like the result, so I hid them later.

Dog smiling

Day 8: Harry Potter

I did two versions of this cartoon from scratch. The one below, and another in which Harry is a bit slimmer as my daughter claimed it didn't really look like Harry Potter.

Harry Potter cartoon

Day 9: Cardinal

Based on Cardinal by Jord Riekwel on Dribbble. I later did a versions with colors trying to change it into a Blue Jay, but none of them are as cool as the original.

Alt Text

Day 10: Profile

I really like this one too... even when it doesn't do honor to the original in which it is based on: Swiss Beatz by Rogie (which is 1,000-times more expressive and nicer than mine).

Profile


And that's it for now. Hopefully, there will be 10 more in 10 days 😊

Discussion

pic
Editor guide
Collapse
ziizium profile image
Habdul Hazeez

This super-awesome!, I can't wait to read the code.

Hopefully, there will be 10 more in 10 days 😊

I hope you can, best of luck.

Collapse
lai32290 profile image
Lai Xuancheng

OMG, this challenge idea is so good! And you're also so good at css

Collapse
davey profile image
Davey

These are amazing !! You’ve got a real talent.

Collapse
dimplejha profile image
DIMPLE JHA

ALL UR WORK IS AMAZING

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

This is very cool - love your work! Looking forward to seeing more 😊

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! It was your challenge and the drawings that you share on Twitter the ones that inspired me to do something similar :)

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

That makes me so happy! ❀️

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’»

Amazing CSS art. πŸ˜²πŸ’―
Very impressive.

Collapse
maxtonprojects profile image
Hameed Kareem

This is super awesome man

Collapse
alvaromontoro profile image
Collapse
maxtonprojects profile image
Hameed Kareem

What are the strategies you sticked to when first learning css?
I mean your learning techniques.

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

It was more of a try-and-error and reading a lot of MDN documentation pages. Also, looking at what other people were doing and peeking at the code.

Collapse
karthiknayak profile image
Karthik-Nayak

How much time do you take to complete each css art?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

It depends on which one. Some take around 1-hour, some take a few hours. The Disney castle one took me longer because I hit a block (I did smaller ones in between)

Collapse
karthiknayak profile image
Karthik-Nayak

Really appreciate you css skills

Collapse
piyush profile image
Piyush Suthar

Awesome! 😍
I can't even make them in Illustrator πŸ˜…πŸ˜‚

Collapse
alvaromontoro profile image
Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

This is amazing!

Collapse
robole profile image
Rob OLeary

I like the unibrow from Day 4 πŸ˜„

Collapse
alvaromontoro profile image
Alvaro Montoro Author

That one and Day 10 are my favorites of this batch.

Collapse
buzzfair profile image
Guin White

I had no idea this level of illustrative detail was possible with only HTML and CSS. Your talent with it is incredible! Very impressive πŸ‘

Collapse
obo101 profile image
obo101

Nice they look cool.

Collapse
zakariaelk profile image
Zakaria Elk

Sick stuff! Love it

Collapse
lakinduk profile image
Lakindu Kariyawasam

Amazing !! πŸ€“

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thank you 😊

Collapse
lanrewaju profile image
Lanre Fagbeyiro

This is so AMAZING!!! Please how did you learn to draw with CSS? What are the concepts I need to learn. I am a beginner. Thank you

Collapse
taylorw profile image
Taylor Wood

Wow, remarkable work.

Collapse
alvaromontoro profile image
Collapse
blanchloe profile image
Seonyoung Chloe

got so inspired!