My Divtober 2022 Drawings
Tags: css, webdev, showdev, art
Published: 2022-10-31 13:44:19

---
title: My Divtober 2022 Drawings
published: true
description: A collection of single-element CSS Art part of the divtober'22 coding challenge
tags: css,webdev,showdev,art
canonical_url: https://alvaromontoro.com/blog/68019/my-divtober-2022-drawings
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g96jgavjp7ard7q4y5yg.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-31 13:12 +0000
---


October is gone. And with it, divtober is over too. Divtober is a coding challenge organized by [Lynn Fisher](https://twitter.com/lynnandtonic) that happens in October. It consists of drawing something ([related to the word of the day](https://a.singlediv.com/divtober2022/)) with CSS using a single HTML element. This article is a collection of the drawings I did for the 2022 edition.

**Most of these drawings are on [cssdrawings.com](https://cssdrawings.com/)**, but some were not too practical to be added, so I didn't include them on the site, but I added them in this article. I hope you like them. And **if you completed some of the challenges, please share a link in the comments. I want to see them :)**

## The Drawings

### 1. Badge
This drawing is a Boy Scouts merit badge (extra points if you know which one it is).

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

### 2. Dry
An umbrella to stay dry from the rain. An attempt at something "minimalist."

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

### 3. Snack
A bag of chips.

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

### 4. Quiet
Thinking about something quiet, I wanted to do something in space (what can be quieter?), so I drew this sunrise from outer space. Maybe a bit off-topic, though.

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

### 5. Stamp
A postmarked stamp.

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

### 6. Meaty
This hamburger will become more or less meaty depending on the window size ([open the demo and resize the window](https://codepen.io/alvaromontoro/pen/YzLOyjP)):

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

### 7. Wonder
Wonder Woman kawaii-themed drawing. I'm not a big fan of the symmetries in pictures.

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

### 8. Haunted
A haunted house (the obvious choice.)

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

### 9. Rise
The rise of the dead is here!

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

### 10. Game
I created two demos for this word (and I streamed the process on Twitch, but the quality was not excellent). One is a drawing of a Game Boy (below), and the other is a [single-element maze game](https://codepen.io/alvaromontoro/pen/bGMQapB).

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

### 11. Burger
I had done a hamburger already. I completed a new one, but this time it was running because it was "fast food."

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

### 12. Shadow
This drawing of the word "SHADOW" projects a shadow. This demo doesn't have any letters; all of them are background lines-a [Time-lapse of the process](https://www.youtube.com/watch?v=34zyL-rNbZs).

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

### 13. Forever
Based on the myth of Sisyphus, who had to carry a boulder uphill for all eternity as a punishment.

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

### 14. Splash
This one is heavily animated: a bird poops on the floor, making a splash (a silly thing). I live-coded it on Twitch. Here is a [video showing how to create a splash effect](https://www.youtube.com/watch?v=o9Z41vGvfOA) and a [blog article](https://levelup.gitconnected.com/creating-a-splash-effect-with-html-and-css-with-video-49d8921de97b).

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

### 15. Erase
A pencil erasing the "less" part in the word "powerless."

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

### 16. Hypnotic
An animated pendulum. Is it swinging or swinging and spinning? Don't get hypnotized!

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

### 17. Stripes
This drawing may be a bit far-fetched, but as they say, IFKYK. These are the first three album covers by The White Stripes (after removing the people.)

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

### 18. Pun
I live-coded this cartoon. It was fun, and the streaming went better than the last time (but I had to lower the quality so much that it's not worth sharing online.)

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

### 19. Mythical
This drawing of Medusa also has just one HTML element. There's a [video of the coding process](https://www.youtube.com/watch?v=aDTl_hPm1Sc).

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

### 20. Ten
Soccer star Lionel Messi wears number 30 at PSG, but for the longest time, he wore number 10 in FC Barcelona and the Argentina national team. This drawing is a "bobblehead" cartoon of Messi.

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

### 21. Valuable
A treasure chest.

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

### 22. Soft
I don't like this "soft drink" much. The proportions are off, and it doesn't look that great. But not all days will be fine (although this is two weak days in a row.)

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

### 23. Pop
I had other single-element drawings that could go with "Pop" (like the previous day's pop soda), but I like this pop-art-styled owl.

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

### 24. Cubed
This effect makes me dizzy. My brain changes between a cube missing an outside piece and a cube at an inside corner. Not my best demo.

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

### 25. Luminous
I live-coded this drawing on Twitch. But I still had many technical difficulties, so I didn't upload the video for later.

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

### 26. Vintage
This VHS cartoon would have worked for the "pop" day.

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

### 27. Grain
Take this drawing with a grain of salt :-P

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

### 28. Monster
No-Face is a spirit/monster from the movie Spirited Away.

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

### 29. Free
A silly joke turned into single-element CSS art. I should have added a cake.

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

### 30. Beloved
October 30th was a Sunday. I didn't get much time to draw because I spent the whole day with my family doing outdoor activities. I wouldn't change it for a CSS drawing.

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

### 31. Brew
I was thinking about reusing the soda can to make a beer can, but instead, I opted for my real source of energy: coffee! This French press was a quick drawing and only used one element without pseudos. I may spend some time later, making it a bit more realistic.

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

## Some extras

Thirty-one drawings are not enough. I completed a few more single-element CSS drawings in October. Some were related to the divtober challenge, and some were me taking a break and doing something different.

### Night landscape
I did a single-element and a zero-element version of this drawing. It looks better in squared/portrait mode ([check it on this link](https://codepen.io/alvaromontoro/pen/PoejgMd))

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

### Game character
This one was an alternative for the #24: cubed. I also did a [three-dimensional Rubik's cube](https://codepen.io/alvaromontoro/pen/ZERzZEx), but it was a remake of a previous demo.

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

### Bill Cipher
The demon from the TV show Gravity Falls was an alternative for the #28 monster. [I even recorded the process and shared it on Youtube](https://www.youtube.com/watch?v=upDI2Q7yIqE).

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

## Conclusion
My favorite drawing in this edition was No-Face (even when it was a bit of a stretch for the day's word, and the railing doesn't match the rest of the drawing).

I enjoyed playing with the blur-contrast effect. I had barely used it before but had seen people like [Temani Afif](https://twitter.com/ChallengesCss) or [Ana Tudor](https://twitter.com/anatudor) master it in the past. In the end, I used it a little bit too much (what can I do? the effect is nice!)

And now that divtober has finished is when one of its most significant benefits starts (at least, for me): if I was able to carve out 30–60 minutes of the day every day to do a CSS drawing, I could continue to carve out 30–60 minutes to do other things such as reading, learning, or completing that pesky course that I always say "no time" as an excuse.

Of course, I don't need divtober for that: the time and the opportunity are always there. But they often get buried in everyday activities and priorities; over time, I tend to forget them. It is nice to have this reminder… and the CSS art helps too.

---

If you completed the divtober challenge (completely or partially), I want to hear from you and see your drawings. Please, share them in the comments or [reach out on Twitter](https://twitter.com/alvaro_montoro). It's always nice and insightful.

And if you are looking for more divtober demos, [check the #divtober hashtag on Twitter](https://twitter.com/search?q=%23divtober) and follow some of these amazing people:

- [Lynn Fisher](https://twitter.com/lynnandtonic)
- [Temani Afif](https://twitter.com/ChallengesCss)
- [Greg Robleto](https://twitter.com/robleto)
- [Maxime Malfilâtre](https://twitter.com/DevMaxew)
- [Jakub Iwanowski](https://twitter.com/dzajew)