Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

CSS Aficionado

100 Days of CSS Illustrations

css art html showdev

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.

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

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.

Girld coding on a laptop

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.)

Illustration that forms the word Love

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).

Manga character

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.

Illustration of a floating castle

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).

Cartoon with a Fuzzy monster holding a sign

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.

Cartoon of a wiener dog

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.

Illustration of the castle in Jaen, Spain

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!

Cartoon showing Pikachu, one of the main characters of the TV show Pokemon

Day 19: Giraffe

This cartoon of a giraffe is based on a different one I made for my daughter around 5 years ago.

Giraffe cartoon

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.

Cartoon showing a landscape with layers of trees

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

Cartoon of an angel and a demon

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.

Illustration of the cartoon character Pucca

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.

Minimalistic cartoon of a dog

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

Cartoon of a person smiling softly

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.

Cartoon depicting Bender from the TV show Futurama

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. 😬😰

Cartoon showing a man with a speech bubble with the text "Hello... I guess..."

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.

Cartoon of a man with a serious expression

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.

Alt Text

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.

Cartoon of a castle that resembles the one from Disneyworld, with many towers and balconies

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.

Polygonal cartoon depicting Leo Messi showing his jersey to a non-visible crowd

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 "Coffe and a gift card? I like it" in the section below

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

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.

Animated Pacman-looking scenario with many white dots and the Pacman figure moving around

Day 42: Water bottle

An empty bottle of water.

Cartoon of 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.

Cartoon of a person wearing a hoodie

Day 44: Tipsy

Based on Wine tasting - conclusion by Motionblurstudios on Dribbble.

Cartoon of a woman drinking wine

Day 45: Woman

Inspired by "woman wearing black crew-neck shirt" by Aiony Haust on Unsplash. This cartoon is done just using clip-paths.

Cartoon of a woman done with polygons in bright colors

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.

Simple cartoon with  different shapes: a heart with the letters "CH", a rounded area that looks like a face with hair, and two antennas with pompoms at the top

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.

A cartoon of a flower pot with eyes, legs, and arms

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).

A cartoon of a man with a black leather jacket, a t-shirt, and a big toupe

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.

Cartoon of a whale swimming under water

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.

Abstract/Linear version of Don Quixote, a man with a helmet and a spear

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.

Cartoon with a big smiley ape-ish monster

Day 52: Demon

I was about to get to 666 followers on Codepen, so original-me decided to do a cartoon depicting a demon.

Cartoon depicting the upper body of a red demon with horns, triangular eyes, big muscles, and a tail

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.

Cartoon of a puppy with big eyes and big ears

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.

Cartoon of a young person wearing a t-shirt with the text "HTML"

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.

Cartoon of a koi done with lines

Day 56: Peter Griffin

Minimalist version of Peter Griffin, a character from the TV show Family Guy.

Minimalist cartoon of Peter Griffin from 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.

Cartoon of a bicycle in motion

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.

Cartoon of Mafalda, a little girl wearing a dress and a bow on her head

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.

Cartoon of a superman-looking superhero with tights, a cape, and a big logo with an S

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.

Cartoon of a beach with a sunset, and an umbrella open on the sand

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.

Minimalist drawing of a face with eyes, nose, and a mouth with a big frown

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.

Young woman holding a sign with the text "Sous les pavés, la plage" (in French: "Under the pavement, the beach"). A slogan from 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.

Young man smiling and wearing a v-neck t-shirt

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).

Poster with the words "Election 2020". The first zero is blue with sunglasses on top. The second zero is red with a yellow hair toupe

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.

Minimalistic illustration of a mouse with rounded ears looking back

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.

Girl with ponytails, wearing a dress, and holding a balloon

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

Wooden boat with two oars floating on the water

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!)

A small grim reaper holding a scythe

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.

Face of a man with a scar and screws on his forehead, and a serious frown

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

Abstract/Minimalist version of a white dog holding a still position

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.

Cartoon of Dracula smiling

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).

A person's profile looking to the left

Day 73: Gnome

A sad gnome.

A sad-looking gnome with a hat and small boots

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.

Cartoon of a ginger boy with curly hair, big glasses, and a t-shirt that reads "Vote for Pedro"

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.

Cartoon with a stick of butter and a carton of soy milk. The stick of butter says "Hi, Soy Milk!" and the carton of soy milk replies "No, tú eres Mantequilla"

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.

Cartoon of a smiling egg with arms and legs, wearing glasses

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.

Cartoon of a kid running with a soccer ball

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.

A cartoon that looks like a dog "humanoid" dog wearing pants and a shirt

Day 79: Spooky

This single element illustration was inspired by "Spooky" by Jack Moran on Dribbble.

The word spooky with additional lines around the O's so they look like a skull

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.

Cartoon of a nun wearing a black and white habit, and with a cross

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

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.

Cartoon of a blank coffee mug

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.

Cartoon of a smiling beaver

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.

Illustration of a woman smiling with her eyes closed

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

Illustration of a soccer field from the top. The players and referees are dots, the team on the left is following a 4-4-2 tactic, while the team on the right has a 4-3-3

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.

Cartoon of a girl wearing a red dress and hood, and holding a basket

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.

Bi-chromatic face of a person with the hair mixing with the background

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.

Cartoon of a man wearing a t-shirt and working on a laptop

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.

Punchline: a female supervillain with long hair and tons of makeup

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.

Cartoon of a man wearing a shirt

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.

Woman wearing a tank top, with some piercings and punk hair

...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:

Ambigram for 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):

Vintage looking The End message similar to the ones from Warner Brothers in the 60s

Article originally published on