Counter Arts
Published in

Counter Arts

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.

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

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

--

--

--

Whacky, countercultural, and the only 1 Stop for Nonfiction on Medium.. Who cares what the algorithm says?

Recommended from Medium

What did you expect?

An Honest Breakdown of My 2020 Side Hustle Income

5 Lessons from 8 Episodes of Abstract: Art Of Design

3 Reasons Why You Don’t Need LinkedIn When Looking for a New Design Job

Providing help and guidance to HealthCare.gov applicants

How to design an Apple Design Award-winning app

My design journey!

It took me 54 days to make $100 in passive design income

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvaro Montoro

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro

More from Medium

position and z-index

How To Create A Simple Carousel using CSS

An image of carousel

CSS variables and UI improvement

A Basic Walkthrough of the CSS Box-model.