Divtober Drawings
Tags: css, html, webdev, showdev
Published: 2021-11-01 15:49:14

---
title: Divtober Drawings
published: true
description: A collection of the different drawings I did for Divtober 2021.
tags: css,html,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37wu6d5fdfta79vrxnjl.jpg
canonical_url: https://alvaromontoro.com/blog/67991/my-divtober-2021-drawings
---

[Lynn Fisher](https://twitter.com/lynnandtonic) is an amazing CSS Artist, and she is especially great at [creating CSS drawings using just a single HTML element](https://a.singlediv.com/) among many other projects she does ([Nestflix](https://nestflix.fun/) is a lot of fun!)

In October, she organized #divtober, a one-month challenge in which she drew (and encouraged others to participate too) CSS art based on different topics. **The condition: use just one HTML element**. This was the list for this year:

{% twitter 1442895061000155136 %}

In the past, I have done CSS art, but with multiple elements, so I decided to join the challenge and draw with CSS using a single HTML element for a change. Here are the drawings I did: 

## Day 1: Fan

This 3D-looking fan is interactive: pull the string to make it work.

{% codepen https://codepen.io/alvaromontoro/pen/gORyXgq %}

## Day 2: Watch

{% codepen https://codepen.io/alvaromontoro/pen/mdwggPb %}

## Day 3: Quick

{% codepen https://codepen.io/alvaromontoro/pen/LYLozab %}

## Day 4: Loop

An animated explanation of how a `for` loop works (I know, it's not a drawing _per se_, but it is interesting)

{% codepen https://codepen.io/alvaromontoro/pen/WNOqrXx %}

## Day 5: Tired

{% codepen https://codepen.io/alvaromontoro/pen/WNOqmzm %}

## Day 6: Hungry

{% codepen https://codepen.io/alvaromontoro/pen/abwgexj %}

## Day 7: Toxic

{% codepen https://codepen.io/alvaromontoro/pen/jOwgdxa %}

I recorded the process for this one and shared it on Youtube. Later, I'd do the same with other drawings.

{% youtube fitjMV2bmA4 %}

## Day 8: Growing

{% codepen https://codepen.io/alvaromontoro/pen/MWvgVGx %}

## Day 9: Homonym

Homonyms are words that are written the same but have different meanings. So I drew a paper boat sinking in a bathroom sink.

{% codepen https://codepen.io/alvaromontoro/pen/porzXrO %}

## Day 10: Organized

A 1920s member of the organized crime. I like this drawing, but it's an example of something that would be 1,000 times better and easier using SVG.

{% codepen https://codepen.io/alvaromontoro/pen/RwZwZZQ %}

## Day 11: Slice

I removed the demo from this day because it has autoplay audio and it can be a bit annoying. [You can see it live on this link](https://codepen.io/alvaromontoro/pen/qBXEdNp)

![A cartoon of a pizza holding a microphone, singing, and dancing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw0b9ph257dj7gpvauza.png)

## Day 12: Squeak

{% codepen https://codepen.io/alvaromontoro/pen/bGrNLBP %}

## Day 13: Camouflage

{% codepen https://codepen.io/alvaromontoro/pen/eYENBdJ %}

## Day 14: Fancy

{% codepen https://codepen.io/alvaromontoro/pen/RwZPXRa %}

...And the video of how it was done:

{% youtube Giq9h88lVnc %}

## Day 15: Float

{% codepen https://codepen.io/alvaromontoro/pen/zYdvmVZ %}

This cartoon was based on a previous cartoon I had done (using multiple elements). Here's the video of how it was done:

{% youtube kb-MxR1BXHw %}

## Day 16: Snow

I did to entries for snow. One was an abominable snowman...

{% codepen https://codepen.io/alvaromontoro/pen/ExvPOGo %}

...and the other one was a snowfall animation using a single element (beware, your computer fans may start overworking with it).

{% codepen https://codepen.io/alvaromontoro/pen/WNErYxV %}

## Day 17: Stack

This and the following day, I didn't have many ideas and went for easy drawings.

{% codepen https://codepen.io/alvaromontoro/pen/LYjNREg %}

## Day 18: Shine

{% codepen https://codepen.io/alvaromontoro/pen/MWvyBbY %}

## Day 19: Nostalgia

What's more nostalgic than a cassette with music recorded directly from the radio?

{% codepen https://codepen.io/alvaromontoro/pen/eYEzPrb %}

...and the video of how it was done.

{% youtube 0zaKHAa439A %}

## Day 20: Journey

This was a weird one. I tried to do a The Wizard of Oz homage but ended up with something too abstract and simplistic.

{% codepen https://codepen.io/alvaromontoro/pen/GRvjQvo %}

## Day 21: Magic

A magic trick with CSS and a single HTML element. Will the Great Wizard Al guess your card and remove it from the deck?

{% codepen https://codepen.io/alvaromontoro/pen/zYdowmM %}

## Day 22: Critter

{% codepen https://codepen.io/alvaromontoro/pen/ZEJLzov %}

And how this bunny(?) was drawn:

{% youtube lrHtJQa810E %}

## Day 23: Loud

I tried to go with a realistic drawing this time. Something "easy": a volume knob that goes up to 11.

{% codepen https://codepen.io/alvaromontoro/pen/BadpNdN %}

## Day 24: Smelly

{% codepen https://codepen.io/alvaromontoro/pen/VwzPRVa %}

Silly/childish me decided to code a demo combining #23 (loud) and #24 (smelly) using `<audio>`:

{% codepen https://codepen.io/alvaromontoro/pen/dyzNVVw %}

## Day 25: Dip

{% codepen https://codepen.io/alvaromontoro/pen/ExvWxQJ %}

## Day 26: Spice

Another realistic attempt: a bottle of spices. This may take a second to load:

{% codepen https://codepen.io/alvaromontoro/pen/wvqJNGZ %}

...and how it was done:

{% youtube 1SCCwqehAYA %}

## Day 27: Film

{% codepen https://codepen.io/alvaromontoro/pen/qBXmKOr %}

## Day 28: Dots

There's a [second version of this that only works on Chrome](https://codepen.io/alvaromontoro/pen/yLooOgr), and I personally like it better.

{% codepen https://codepen.io/alvaromontoro/pen/zYddvKz %}

## Day 29: Fruit

Another day in which I did two drawings. First I tried doing a still nature:

{% codepen https://codepen.io/alvaromontoro/pen/bGrrWMQ %}

...but I didn't like how it was going, so I drew a cute watermelon, and shared the process on Youtube.

{% codepen https://codepen.io/alvaromontoro/pen/mdMMzPm %}

{% youtube k5DLVrswBxM %}

## Day 30: Contrast

{% codepen https://codepen.io/alvaromontoro/pen/MWvvMpy %}

{% codepen https://codepen.io/alvaromontoro/pen/VwzMvzx %}

## Day 31: Spooky

Halloween Day and the word was "spooky", I tried different things, as I wasn't convinced by them:

The word spooky replacing the O's with a skull and a ghost:

{% codepen https://codepen.io/alvaromontoro/pen/jOLGxpL %}

A ghost (and how it was done):

{% codepen https://codepen.io/alvaromontoro/pen/KKvXqRd %}

{% youtube JBtuqHSlI-8 %}

And finally a Frankenstein's Monster with CSS and a single HTML element:
{% codepen https://codepen.io/alvaromontoro/pen/bGroKpY %}

...with video too:

{% youtube 7y3WzWmzxgA %}

## Conclusion

It was fun completing the challenge and trying different things with CSS and the background gradients. I learned some new things, found some differences between browsers, and enjoyed seeing what other people did ([check the #divtober tag on Twitter](https://twitter.com/search?q=%23divtober&src=typed_query&f=live)).

But it's time to take a break. These challenges are more time-consuming and draining than what they look like. I will make more CSS art in the future but, for now, it will have more than a single HTML element.