As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. I published a series of 10 posts with 10 images each. This article has all images in a single post, as well as links to videos on how they were drawn.
Some of the images are original, and some others are inspired or based on different artists (providing a link to the original in the description for these cases)... which lead to an interesting combination of designs and styles, while I tried to find my own.
Here are the 100 illustrations/drawings I made in the past 100 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.
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.
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.)
Day 4: Face
This cartoon is from scratch and I really like how it turned out, with the condescending look and smirk.
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.
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.
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.
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.
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.
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).
Day 11: Coding master
This cartoon was done from scratch. A little tongue-in-cheek, the code in the background is the same as the drawing, so the character is coding itself. It uses CSS variables, so it can be easily customizable.
Day 12: Love/Amor
I like the cubist/minimalist animations by Dennis Hoogstad. And I did a version of Love that transforms to the word Amor on hover (without the animation.)
Day 13: Manga character
Another cartoon from scratch. I like it although I'm not a big fan of how the hair ended up looking. This manga character can also be customized via CSS variables (see code line 42).
Day 14: Floating tower
I need to learn a lot about perspective and shadows. What is interesting about this 3D-looking castle it that it was developed with a single HTML element and using clip-paths and box-shadows.
Day 15: Fuzzy monster holding a sign
This is inspired by my own design on Dribbble and it is part of the same series as another cartoon in this challenge (actually I reused some parts and cheated by using SVG for filters).
Day 16: Wiener dog
This cartoon was inspired by this cartoon found online (I don't know the author to credit :S)... although my version took a Simpsonesque turn.
Day 17: Jaen, Spain
This is an illustration of Saint Catherine's castle in Jaen, Spain, the city where I grew up. To draw (especially the tree area) I used clip-path and the drop-shadow filter, so it may not be visible in all browsers.
Day 18: Surprised Pikachu meme
A version of the popular Surprised Pikachu meme done with HTML and CSS. The quotes change every 7 seconds, and some of them should probably be Unsettled Tom instead... -5 points for the wrong meme use!
Day 19: Giraffe
This cartoon of a giraffe is based on a different one I made for my daughter around 5 years ago.
Day 20: 3D Landscape
Based on Landscape by Parham Marandi on Dribbble. It uses 3D transformations, and it is slightly interactive: you can move the mouse around the screen to see the landscape rotate.
Day 21: Angel & Demon
The first version of these characters was from 2010, when I started developing a Bible trivia game (that never saw the light of day). The original ones are smoother and curvier, and have arms too :P
Day 22: Pucca
Pucca is a popular character created by VOOZ. It was originally an online e-card service but soon extended to web animations, games, TV shows... I almost missed this day, so I ended up going for something easy.
Day 23: Dog from letters
I tried to do something similar to what I did with this owl, but I failed. Sometimes you have days to draw and love it, and some days you hate the result. This was one of the latter... maybe I'll try to redo a different day.
Day 24: Cartoon character
Another customizable cartoon (change the CSS variables on line 33) with a manga-esque look. You can see how I coded it on this video
Day 25: Bender Bending Rodríguez
Futurama is(/was/is?) an amazing TV show, and gave us one of the most iconic animation characters ever: Bender! Unfortunately, I used drop-shadow and some transform that makes the cartoon look terrible on some browsers.
Day 26: Hello... I guess...
Another cartoon that was done in a hurry... so it's not that great, plus it uses drop-shadow so it won't work in all browsers. 😬😰
Day 27: Man's face
I drew this one in a hurry too, but I like the general result a lot better than the previous image. Not 100% sold on the eyes, but don't look that bad either.
Day 28: Plant sprouting
A vectorial cartoon of a pot with a plant sprouting inside. The soil has a little texture, and some filters were used to add some blurriness.
Day 29: Magic castle
Another castle –the last one for a while, I promise–. This time it is based on Disney World/Cinderella's Castle by Dmitry Stolz on Dribbble... and coding this one took more effort than what I expected initially.
Day 30: Leo Messi
Based on Leo Messi by Mark Iddon on Dribble. This illustration of Leo Messi celebrating a goal against Real Madrid was done only using clip-paths and backgrounds.
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.
Day 32: Line house
Based on Line houses collection by Boyko on Dribbble. I liked the simplicity and elegance of the original.
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.
Day 34: Rainbow cat
This animated (and equals part hypnotizing, creepy, and mysterious) illustration is based on "Rainbow Cat" by Ryan Feerer on Dribbble.
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.
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.)
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.
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).
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.
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
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.
Day 42: Water bottle
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.
Day 44: Tipsy
Based on Wine tasting - conclusion by Motionblurstudios on Dribbble.
Day 45: Woman
Inspired by "woman wearing black crew-neck shirt" by Aiony Haust on Unsplash. This cartoon is done just using clip-paths.
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.
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.
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).
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.
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.
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.
Day 52: Demon
I was about to get to 666 followers on Codepen, so original-me decided to do a cartoon depicting a demon.
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.
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.
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.
Day 56: Peter Griffin
Minimalist version of Peter Griffin, a character from the TV show 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.
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.
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.
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.
Day 61: Unimpressed
This cartoon was drawn from scratch with the face of an unimpressed person. You can watch how it was done in this video.
Day 62: Young woman holding a sign
Another cartoon from scratch. This time it is a young woman holding a sign with a slogan from the French May'68.
Day 63: V-neck guy
And yet another cartoon from scratch... and a different style from the previous two. There is a video on how this cartoon was done on Youtube.
Day 64: Vote!
This was an attempt at doing a simple logo/banner with HTML and CSS. The US presidential elections were 27 days away, and the main candidates were Trump (known for his hair) and Biden (who sports aviator sunglasses).
Day 65: Mouse
Inspired by "Day 6 - Rodent" by Cris on Dribbble (which is so much better with textures and shapes). There is also a video of how it was done.
Day 66: Girl holding a balloon
Inspired by an illustration by super-talented Ana María. As with the previous cartoon, the originals are 1,000 times better than my translation into HTML+CSS. Video of how it was drawn.
Day 67: Boat
This one is interesting. On Firefox, it looks fine, on Chrome sometimes a background flickers (why?), and on Safari, the box-shadows act funny with the boat shape... I'll need to be more careful with that in the future :S
Day 68: Little Death
A pre-Halloween cartoon done from scratch. I really like the result of this one. Chrome seems to have issues with box-shadows, rounded borders, and relative units, affecting how the scythe is drawn (or even displayed!)
Day 69: Frankenstein's Monster
Another Halloween-themed illustration from scratch. Halfway through this one, I felt tempted just to do The Hulk but didn't change direction. Here is a video of how it was done.
Day 70: Ellipse's Poodle
This dog was drawn using only ellipses and semicircles. It was fun to do, although the result is not too impressive... It almost looks more like a goat than a poodle :S
Day 71: Dracula
This animated Dracula will follow the mouse around the screen (without JS) thanks to a grid of elements. You can watch a video on how it was developed here.
Day 72: Silhouette
This silhouette is interesting because it was drawn using only circles. Watch a video of how it was drawn (including two variants).
Day 73: Gnome
A sad gnome.
Day 74: Nerdy boy
I started making a cartoon of a boy, but when I started with the body I decided to add the "Vote for Pedro" message... but more than a caricature of Napoleon Dynamite, this would be a boy dressed up as Napoleon Dynamite. Visit my Youtube channel to watch a video of how it was coded.
Day 75: Joke
A (non-original) terrible dad joke playing with the meaning of the word "soy" in Spanish and English. I made a different initial version, but I like this one better... and a video of how it was coded.
Day 76: The Good Egg
Based on the character The Good Egg by Jory John and Pete Oswald. One of my daughter's favorite books at the moment.
Day 77: Soccer
A new cartoon from scratch. I like the dynamism of it with the kid running... and here is a video of how it was done.
Day 78: Cartoon
A cartoon resembling the Animaniacs a little (but not that much really). I was running out of time for today's cartoon and was tired, and the result is obviously not great... again, tomorrow will be better.
Day 79: Spooky
This single element illustration was inspired by "Spooky" by Jack Moran on Dribbble.
Day 80: Nun
Another cartoon from scratch. I literally didn't know what to draw this day, just that I wanted it to be something with big eyes after seeing one of the LOL-cartoons... And the recording on how it was done.
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.
Day 82: Little Monster
A new Halloween-y cartoon done from scratch. Here is the video of how the illustration was drawn.
Day 83: Man's face
Another drawing that was done from the ground up. This is how the illustration was drawn.
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.
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.
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
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.
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.
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.
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
Day 91: No-div-ember Coffee Mug
A slightly animated coffee mug drawn in CSS... and no HTML? Inspired by @jh3yy's #nodivember challenge. It started as a single-element drawing, then I tried to transform it from a coffee mug into a coffee cup. Finally, back to the coffee mug and make it a "no-element" illustration... and the video of the process.
Day 92: Beaver
Inspired by Beaver by Alyssa van de Bogerd on Dribbble. As with many other illustrations, I uploaded a timelapse of how it was done to Youtube.
Day 93: Daydreaming
An illustration from scratch. I really like the facial expression and the simplicity of the drawing... Also, this is the first drawing I didn't record in a while, and it felt a bit weird.
Day 94: Soccer field
This soccer field illustration may not seem like that much, but it has something interesting: it is also part of nodivember, and does not have any HTML tag (apart from the <body>). I will try to animate it later and have the dot/players move around... and the video of how it was done
Day 95: Little Red Riding Hood
These last few days had been kind of "busy" and the CSS illustrations have been done in a rush and this is an example of that. Still, I completed it on time and recorded the process.
Day 96: Face
Another illustration from scratch. Trying to play with colors and mixing rounded/oval shapes to make a continuous element...And a video of how it was done.
Day 97: Person working
I saw different drawings on Dribble using this really simple technique with thin lines and flat shadows and wanted to try something similar. Timelapse of how it was drawn.
Day 98: Punchline
Punchline is a new supervillain created by James Tynion IV in the Batman universe... I wanted to draw Erica Slaughter from Something Is Killing the Children, but that proved to be more complicated than I expected in HTML and CSS.
Day 99: Man
A simple illustration of a man. I tried to add more details than usual and that made the drawing take a bit longer too... And a video of how it was done.
Day 100: Punk
...And for the last one... another cartoon from scratch! This punk-music person may not be as fancy as other drawings I've done, but I really like it. Probably one of my favorites in the 100. And a video of how it was drawn.
...And some extras
Letter Owl
Yesterday, I had a little time to be silly before going to sleep, and I drew an owl with HTML and CSS using the word "owl" as the base to draw from. You can see the process in this video:
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:
The end!
Yes, it is the end! The end of the 100 Days of CSS Illustrations Challenge... but there will be more CSS drawings in the future. To celebrate that the challenge is over, I made this vintage-looking "The End" message without using any HTML element (for nodivember):
Top comments (28)
Nice work, El Chapulín colorado made my day lol.
Thanks. That one was fun to do. Síganme los buenos!
These are all incredible. Please do a 365 challenge next 😉
😅😅😅
Thanks!
100 days was a lot! I don't think I can do a 365 challenge 😳
I can imagine. How much time do you need to make these? Like 3-4 hours if you made one daily?
On average, it took around 1 hour to do each of them. Some were simpler and took 15 minutes (day 90: rabbit in a hat), and some others were more complicated and took several hours (day 29: magic castle).
You did it! Great work. I hope to visit Jaen some day when this is over
Thanks! I hope I can get to visit Jaen soon... It's been a long time :(
🤞🙂
These are SO impressive and the fact that there are videos too makes me so excited! Doing my own first CSS illustration immediately!
Thanks! Please share your illustrations, I look forward to seeing them! :)
Wow, you gotta make Udemy course on this, or some tutorial series... its just amazing
Thanks! I may try to write something, but I need to figure out how to organize it.
These are so awesome! You are so talented.
Thanks ☺️
Woah! Woah!! Woah!!!
Man you are amazing!
This is crazy
I love it
5⭐
Thanks! I'm glad you like it 😊
This is amazing. Please can you give us a well detailed tutorial in order to achieve this. Thank you
Thanks! Now that I've completed this challenge, I'll have some time to write something soon :)
Wow man. This is awesome 👏
Thanks 😊
That's some serious hard work you've put in... Cheers!
Thanks