100 Days of CSS Illustrations (91-100)
Tags: css, art, html, showdev
Published: 2020-11-12 20:10:13

---
title: 100 Days of CSS Illustrations (91-100)
published: true
description: Days 91-100 of the 100 days of CSS illustrations challenge.
tags: CSS,art,html,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h5qylfpdoisrckk17vbc.png
series: 100 days of CSS illustrations
---

This is the final installment of the 100 Days of CSS Illustrations challenge... at least the last one with new drawings –spoiler alert: there will be new drawings–, there will be at least one more post to look back and reflect on.

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](https://codepen.io/collection/AOaOdx).

## Day 91: No-div-ember Coffee Mug

A slightly animated coffee mug drawn in CSS... and no HTML? Inspired by [@jh3yy](https://twitter.com/jh3yy)'s [#nodivember](https://twitter.com/hashtag/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](https://www.youtube.com/watch?v=JNYKhY4MZsg).

[![Cartoon of a blank coffee mug](https://dev-to-uploads.s3.amazonaws.com/i/wpfqsorg0zun4oos7m1c.png)](https://codepen.io/alvaromontoro/full/MWeXJEM)

## Day 92: Beaver

Inspired by [Beaver](https://dribbble.com/shots/14520392-Beaver) by [Alyssa van de Bogerd](https://dribbble.com/UncreatedLotus) on Dribbble. As with many other illustrations, I uploaded a [timelapse of how it was done to Youtube](https://www.youtube.com/watch?v=NEtVUnySuTQ).

[![Cartoon of a smiling beaver](https://dev-to-uploads.s3.amazonaws.com/i/cl5mds8uda71b771l8zb.png)](https://codepen.io/alvaromontoro/full/xxOJgGo)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/ps1i6movk0cuvqwttlff.png)](https://codepen.io/alvaromontoro/full/pobZXYG)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/ydjmdr3pvtff4s7tp4jf.png)](https://codepen.io/alvaromontoro/full/bGexbjw)

## 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](https://www.youtube.com/watch?v=TD9qmpe03UE).

[![Cartoon of a girl wearing a red dress and hood, and holding a basket](https://dev-to-uploads.s3.amazonaws.com/i/tlf8vu9vd61080zf1la7.png)](https://codepen.io/alvaromontoro/full/LYZJvNZ)

## 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](https://www.youtube.com/watch?v=qoGnz10dVA4).

[![Bi-chromatic face of a person with the hair mixing with the background](https://dev-to-uploads.s3.amazonaws.com/i/lp755g4jinnddapiftwv.png)](https://codepen.io/alvaromontoro/full/mdEzVXp)



## 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](https://www.youtube.com/watch?v=Q4Xgjgh3UZ0).

[![Cartoon of a man wearing a t-shirt and working on a laptop](https://dev-to-uploads.s3.amazonaws.com/i/jduejp6p37ehzn9ftsba.png)](https://codepen.io/alvaromontoro/full/YzWJpGj)

## Day 98: Punchline

Punchline is a new supervillain created by [James Tynion IV](https://twitter.com/JamesTheFourth) 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... [but it worked fine as you can see on this video](https://www.youtube.com/watch?v=67nfgaWH41c).

[![Punchline: a female supervillain with long hair and tons of makeup](https://dev-to-uploads.s3.amazonaws.com/i/3v0o73ak03rst7botf3q.png)](https://codepen.io/alvaromontoro/full/MWezQEa)

## 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](https://www.youtube.com/watch?v=aCGiLMFpFWY).

[![Cartoon of a man wearing a shirt](https://dev-to-uploads.s3.amazonaws.com/i/cerx8ynu4jlnqj6vpj4q.png)](https://codepen.io/alvaromontoro/full/YzWRjPd)

## 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](https://www.youtube.com/watch?v=vdl5pCQkNlA).

[![Woman wearing a tank top, with some piercings and punk hair](https://dev-to-uploads.s3.amazonaws.com/i/vujg6cwa5juairdebcwt.png)](https://codepen.io/alvaromontoro/full/oNLJqyJ)

## Extra: The end!

Yes, it is the end! That was the 100<sup>th</sup> illustration of the 100 Days of CSS Illustrations Challenge. So I did 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](https://dev-to-uploads.s3.amazonaws.com/i/85mzhsm14smyfiiiogub.png)](https://codepen.io/alvaromontoro/full/ZEOVEKJ)