100 Days of CSS Illustrations
A collection of daily drawings created with HTML and CSS
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 were original, and some others were 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 I made in the past 100 days. Click on the title 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 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.
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.
This cartoon is from scratch and I really like how it turned out, with the condescending look and smirk.
Another one from scratch. This one was based on a series of cartoons I did for my daughter 5–6 years ago.
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.
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.
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.
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).
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.
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).
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.
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.
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.
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!
This cartoon of a giraffe is based on a different one I made for my daughter around 5 years ago.
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
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.
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.
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
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.
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. 😬😰
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.
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.
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.
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.
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.
Just a cup of coffee drawn with the letters of the word “coffee,” and with a small blend mode for the coffee top.
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.)
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.
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.
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
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.
An empty bottle of water.
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.
Inspired by “woman wearing black crew-neck shirt” by Aiony Haust on Unsplash. This cartoon is done just using clip-paths.
A minimalist version of the Chapulín Colorado, a beloved TV character that parodied superheroes shows in the 70s.
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.
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).
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.
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.
A version of a Yeti that I drew for a game a long time ago and that I never ended up publishing.
I was about to get to 666 followers on Codepen, so original-me decided to do a cartoon depicting a demon.
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.
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.
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.
Minimalist version of Peter Griffin, a character from the TV show Family Guy.
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.
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.
This cartoon was drawn from scratch with the face of an unimpressed person. You can watch how it was done in this video.
Another cartoon from scratch. This time it is a young woman holding a sign with a slogan from the French May’68.
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.
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).
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
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!)
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.
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
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.
This silhouette is interesting because it was drawn using only circles. Watch a video of how it was drawn (including two variants).
A sad gnome.
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.
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.
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.
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.
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.
A new Halloween-y cartoon done from scratch. Here is the video of how the illustration was drawn.
Another drawing that was done from the ground up. This is how the illustration was drawn.
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.
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
After doing some Halloween illustrations, it felt good to do a Día de Los Muertos one too. This version of La Muerte/La Catrina 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.
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
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.
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.
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
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.
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.
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.
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.
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.
…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
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:
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:
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):