October is gone. And with it, divtober is over too. Divtober is a coding challenge organized by Lynn Fisher that happens in October. It consists of drawing something (related to the word of the day) 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, 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).
2. Dry
An umbrella to stay dry from the rain. An attempt at something "minimalist."
3. Snack
A bag of chips.
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.
5. Stamp
A postmarked stamp.
6. Meaty
This hamburger will become more or less meaty depending on the window size (open the demo and resize the window):
7. Wonder
Wonder Woman kawaii-themed drawing. I'm not a big fan of the symmetries in pictures.
8. Haunted
A haunted house (the obvious choice.)
9. Rise
The rise of the dead is here!
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.
11. Burger
I had done a hamburger already. I completed a new one, but this time it was running because it was "fast food."
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.
13. Forever
Based on the myth of Sisyphus, who had to carry a boulder uphill for all eternity as a punishment.
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 and a blog article.
15. Erase
A pencil erasing the "less" part in the word "powerless."
16. Hypnotic
An animated pendulum. Is it swinging or swinging and spinning? Don't get hypnotized!
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.)
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.)
19. Mythical
This drawing of Medusa also has just one HTML element. There's a video of the coding process.
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.
21. Valuable
A treasure chest.
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.)
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.
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.
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.
26. Vintage
This VHS cartoon would have worked for the "pop" day.
27. Grain
Take this drawing with a grain of salt :-P
28. Monster
No-Face is a spirit/monster from the movie Spirited Away.
29. Free
A silly joke turned into single-element CSS art. I should have added a cake.
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.
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.
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)
Game character
This one was an alternative for the #24: cubed. I also did a three-dimensional Rubik's cube, but it was a remake of a previous demo.
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.
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 or Ana Tudor 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. It's always nice and insightful.
And if you are looking for more divtober demos, check the #divtober hashtag on Twitter and follow some of these amazing people:
Top comments (13)
This is soo cooolll
So so cool! You could open up a CSS Art Gallery! 🙌
Thanks! I also have one: cssdrawings.com (inspired by Lynn Fisher's A Single Div)
These are all really cool. I think my favorite two are Quiet and Luminous.
wow! love them all! :D
Nice! Now I'm depressed and jealous 😔
Love it!
Nice
Woow, very creative! Congratulations for the drawings and the article, very good!
just awesome 😵💫🔥🔥🔥
Nice and clever drawings! 🤯