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

Software Engineer

Divtober 2021

My Divtober 2021 Drawings

css html divtober

Lynn Fisher is an amazing CSS Artist, and she is especially great at creating CSS drawings using just a single HTML element among many other projects she does (Nestflix is a lot of fun!)

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

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.

Day 2: Watch

Day 3: Quick

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)

Day 5: Tired

Day 6: Hungry

Day 7: Toxic

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

Day 8: Growing

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.

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.

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

A cartoon of a pizza holding a microphone, singing, and dancing

Day 12: Squeak

Day 13: Camouflage

Day 14: Fancy

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

Day 15: Float

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

Day 16: Snow

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

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

Day 17: Stack

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

Day 18: Shine

Day 19: Nostalgia

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

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

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.

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?

Day 22: Critter

And how this bunny(?) was drawn:

Day 23: Loud

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

Day 24: Smelly

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

Day 25: Dip

Day 26: Spice

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

...and how it was done:

Day 27: Film

Day 28: Dots

There's a second version of this that only works on Chrome, and I personally like it better.

Day 29: Fruit

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

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

Day 30: Contrast

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:

A ghost (and how it was done):

And finally a Frankenstein's Monster with CSS and a single HTML element:

...with video too:

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

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.

Article originally published on