One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection.
Tags: showdev, css, html
Published: 2023-11-01 15:20:36

---
title: One HTML Tag. Thirty+ CSS Drawings – My Divtober 2023 Collection.
published: true
description: The month of October hosts Divtober. Acoding challenge in which developers create CSS Art based on a daily word. The catch: you can only use a single div tag.
tags: showdev,CSS,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k758nfzr3e5zwa5s254e.png
canonical_url: https://alvaromontoro.com/blog/68045/divtober-2023
---

You can find all these drawings (and many more) on [cssdrawings.com](https://cssdrawings.com). To check the source code easily, I'll add a CodePen link under each image description.

Some of the drawings are inspired/based on other drawings I found online. When that's the case, I added a link to the original work in the description on CodePen. Also, if I recorded the coding process, I'd share a video on YouTube.

# 1 - Fall

![Cartoon of a carved pumpkin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2eqtckb0jgk9jginfp1r.jpg)

This was not my original idea (see alternatives below), but I like how it looked in the end. This jack-o-lantern is playful and fun.

CodePen: https://codepen.io/alvaromontoro/pen/LYMBMom

---

# 2 - Impossible

![Cartoon of an impossible optical effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stswccokz6t84sjfzj41.jpg)

Not a really original work (many of the Divtober participants went for a similar optical illusion), and found some issues with positioning elements (I had to add an extra box in one of the dimensions for it to work).

CodePen: https://codepen.io/alvaromontoro/pen/PoXBLEJ

---

# 3 - Artist

![Cartoon of Picasso in cubist style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blut9k1u0zx7f2v8pzfr.jpg)

How about drawing Picasso in Picassian/cubist style? PiCSSo! This was a fun one to code, although I struggled a little to find an idea for it (found it on a stock cartoon.)

CodePen: https://codepen.io/alvaromontoro/details/PoXBLEJ

---

# 4 - Crawl

![Cartoon of a smiling earthworm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qvs3c899hrk0ta4ypj3.jpg)

This cartoon is animated: the earthworm moves and crawls. It is one of the two cartoons where I used the blur/contrast trick to make the curves look smooth (I abused that trick last time.)

CodePen: https://codepen.io/alvaromontoro/pen/WNLayZb

---

# 5 - Lost

![Cartoon of a lost and found box with different items popping up from it forming a face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xaub1inje300hr6gmi5.jpg)

Inspired by Pixar's short film "Lou", this lost-and-found box may have a life of its own (although it's not animated).

CodePen: https://codepen.io/alvaromontoro/pen/ZEVmGGb

---

# 6 - Bounce

![Cartoon of a bouncer holding a clipboard while guarding a door](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dptfqo2ns4vmh3z3nmg.jpg)

Does a bouncer bounce? This may be a stretch (and not only because the drawing is responsive and "infinite"). Initially, I thought about drawing a bouncing ball, but then I thought it was too obvious. The demo is slightly animated, with the bouncer saying "no" with his head.

CodePen: https://codepen.io/alvaromontoro/pen/JjweBoZ

---

# 7 - Treat

![Cartoon of an ice cream with two scoops and a cherry on top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmu84kjicj8ifd4aygne.png)

This is one of my favorite drawings from divtober. Simple, sweet, and fun to code... a real treat. [I recorded the coding process](https://www.youtube.com/watch?v=vHln4zdlxoI) and shared it on my YouTube channel.

CodePen: https://codepen.io/alvaromontoro/details/XWoyvMQ

Video: https://www.youtube.com/watch?v=vHln4zdlxoI

---

# 8 - Mix

![Cartoon of a whisk and a mixing bowl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4loh95jf16pdnxwitutk.jpg)

This results from running out of time and not having many ideas on what to do. To be fair, it could have been a lot worse.

CodePen: https://codepen.io/alvaromontoro/pen/yLGGZLw

Video: https://www.youtube.com/watch?v=EIzsv46dFSQ

---

# 9 - Space

![Cartoon of an astronaut floating in space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhf4vku2xvgrtrxorg0k.jpg)

Last year, I did a single-element [CSS drawing that would have been a perfect fit for this word](https://codepen.io/alvaromontoro/pen/WNJyqxO)... This year, not so much... but I really like it (although it may not be the best or most popular).

CodePen: https://codepen.io/alvaromontoro/pen/jOXdyjB

Video: https://www.youtube.com/watch?v=5W3ebJfYi1I

---

# 10 - Sparkle

![Drawing of a sparkle firework lit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8taqxnl6c2nzxk9goml.jpg)

The other illustration using the blur/contrast trick (for the sparkles, combined with other filters). I like the result although it's not as "realistic" as I would have wanted.

CodePen: https://codepen.io/alvaromontoro/pen/abPXrVv

---

# 11 - Bones

![Cute-sy cartoon of a skeleton (or a person through X-Rays)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qrje3yarpv4kqps2ms9.jpg)

The initial version of this cartoon was not cute at all. It was rough and ugly. So I can't complain about how this one resulted.

CodePen: https://codepen.io/alvaromontoro/pen/qBLwqWG

Video: https://www.youtube.com/watch?v=R-YnTXveO_g

---

# 12 - Glass

![Cartoon of A spider seen through a magnifying glass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2yhfsepv8l1p5qhyxvy.jpg)

This one is animated. The spider goes up and down and looks smaller or larger depending if it's behind the magnifying glass or not (this effect is brought up to you by using the same spider drawing on two pseudo-elements :P)

CodePen: https://codepen.io/alvaromontoro/pen/qBLwrQg

---

# 13 - Collect

![Cartoon of a collectible baseball card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d45s7drm8bac0ge893i5.jpg)

Another animated drawing (and in 3D!) A collectible card for a fake baseball player (me!) of the Boston SoCSS –yes, I tend to add unfunny CSS puns in my drawings, sorry.

CodePen: https://codepen.io/alvaromontoro/pen/NWemzOY

---

# 14 - Small

![Cartoon of a chick coming out of the egg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chu31ilv1b7gefp9xw9i.jpg)

This drawing may be cute, and it was ok to draw but the result is... I don't know. It doesn't "bring me joy."

CodePen: https://codepen.io/alvaromontoro/pen/YzdbwJM

---

# 15 - Remember

![Cartoon of a hand with a thread knotted in the index finger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg7pru3ycbluqi6dpy0b.jpg)

"Remember, remember, the 5th of November..." I thought about doing a Guy Fawkes/V for Vendetta type of thing... instead I went with this drawing, which is ironic because I hate to draw hands (on paper or digitally).

CodePen: https://codepen.io/alvaromontoro/pen/WNLBJPx

---

# 16 - Tangled

![Cartoon of a tower with a person with really long blond hair looking from a window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mergevjv6rrta5kp56o9.jpg)

This idea looked better in my head than when I implemented it in code. And it took longer than usual, so I didn't want to spend more time cleaning it up.

CodePen: https://codepen.io/alvaromontoro/pen/abPrdQK

Video: https://www.youtube.com/watch?v=wJBEYKmqDEw

---

# 17 - Brave

![Cartoon of a mouse saying 'fuck you' to a lion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwh9sum5mirjvdjblben.jpg)

Initially, I planned a person holding a chair and taming the lion. But I wasn't fond of that idea (it felt like animal cruelty), and instead went with a version of an old picture I once saw (but with two dogs instead of a mouse and a lion.)

CodePen: https://codepen.io/alvaromontoro/pen/dywBwdm

---

# 18 - Component

![The formula/composition of caffeine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kkyk0ozuk43ttejrzba.jpg)

There are drawings in CSS that I can approve of and drawings that I'd seriously say "use SVG instead". This is one of the latter. For the curious: it's caffeine.

CodePen: https://codepen.io/alvaromontoro/pen/mdaNjzW

---

# 19 - Sticky

![Cartoon of a foot that just stepped on a sticky chewing gum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0c35099ma226n9esy91.jpg)

This cartoon is interactive! Move the foot up and down to stretch the chewing gum stuck on the foot. The effect is achieved by using a range input instead of a div.

CodePen: https://codepen.io/alvaromontoro/pen/NWeQQbO

Video: https://www.youtube.com/watch?v=YWIWXtIumBk

---

# 20 - Seeing

![Drawing of the all-seeing eye of the providence](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ospqn5441f9gy4hwsdq.jpg)

This all-seeing Eye of the Providence is one of my favorite drawings from divtober 2023. And it was surprisingly easy to code.

CodePen: https://codepen.io/alvaromontoro/pen/ExrYJoV

---

# 21 - Faraway

![Minimalistic cartoon of a sextant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cezobx3gwzanr8v0sli.jpg)

Definitely not my favorite drawing. Another one of those ideas that sound better in my mind, but then don't translate that great into drawing.

CodePen: https://codepen.io/alvaromontoro/pen/qBgBrjb

Video: https://www.youtube.com/watch?v=q7GYJ41fKDA

---

# 22 - Alive

![Cartoon of a wanted dead or alive western poster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/647fvton3yt24ygcst1m.jpg)

This wanted sign was easier to code than expected (in part because I went with a silly face instead of trying to do something more elaborate). I like the folding lines on the poster. 

CodePen: https://codepen.io/alvaromontoro/pen/gOqOzPm

Video: https://www.youtube.com/watch?v=vmX9O0jLe4Y

---

# 23 - Fake

![Cartoon of a turtle wearing a fake shark fin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6leyzspbrq0jswls83h.jpg)

There's an alternative for this word (see below), but it was "politically incorrect". Instead, I went with this turtle wearing a shark fin... which is kind of weird.

CodePen: https://codepen.io/alvaromontoro/pen/WNPbeBv

---

# 24 - Feast

![Cartoon of a cornucopia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnts1l6nfh2he7ohq3bu.jpg)

A Thanksgiving message in October? Why not? After all, the stores are already selling Christmas decorations (and it's not even Halloween yet!) This cornucopia was fun to draw.

CodePen: https://codepen.io/alvaromontoro/pen/abXOdZP

---

# 25 - Cheesy

![Cartoon of a piece of cheese kawaii style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbq0wlgo2qrj8c8utcfh.jpg)

This piece of cheese looks more like SpongeBob TriangularPants than a piece of cheese, but I like it. It's cute.

CodePen: https://codepen.io/alvaromontoro/pen/QWYbRMJ

---

# 26 - Cold

![The cold emoji (a blue face with icicles)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p77srhh412z49vx4vejo.jpg)

Trying to mimick and emoji with a single element is a challenging experience. The icicles look fake with no shadows, but it could be worse.

CodePen: https://codepen.io/alvaromontoro/pen/YzByrKw

---

# 27 - Rules

![Drawing with a lot of traffic signs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0knfdpjmvleuqtsuhv6.jpg)

This drawing took longer than I wanted, and then it felt clogged, with too many things going on (plus it is an infinite pattern). Even the browser may have some issues loading it :(

CodePen: https://codepen.io/alvaromontoro/pen/WNPrxwP

---

# 28 - Handmade

![Logo with a ball of yarn and two needles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccngvpoys54er9z73wrn.jpg)

This logo was inspired by another logo I saw online (and can't find anymore). It may be one of my favorite divtober drawings of this year.

CodePen: https://codepen.io/alvaromontoro/pen/xxMZXoZ

---

# 29 - Pin

![Minimalistic drawing of two safety pins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5hwmv6vl13xrhvurl43.jpg)

I made the pin upside down by mistake... lucky me, fixing it with CSS was as simple as doing a `scaleY(-1)`. This is another drawing (along with the logo before too), that may be better in SVG.

CodePen: https://codepen.io/alvaromontoro/pen/LYqNYmL

---

# 30 - Discontinued

![Cartoon of a shutdown store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uln1lel64solehtcnsih.jpg)

This one was fun to make, especially the awning. I like the end result, but I don't find much special to it. It feels like any of the hundreds of drawings of storefronts you can find online... which may be its strength.

CodePen: https://codepen.io/alvaromontoro/pen/ExrKaKv

---

# 31 - Witchy

![Cartoon of a witch with a top hat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aan0o7ehk2oxnzjy86uf.jpg)

I initially did a [flat version](https://codepen.io/alvaromontoro/pen/BaMKJJB) of this drawing but later added the lines. It is inspired in part by a different [single-element illustration I did of a chibi](https://codepen.io/alvaromontoro/pen/abjqKVj).

CodePen: https://codepen.io/alvaromontoro/pen/abXNQyv

---

# Alternatives

There were some other single-element drawings during this time. 

## Fall

![Cartoon of a fall landscape with the sun setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gq4dhxk5bd6mcg63fjc.jpg)

Maybe it was too ambitious. Maybe I just didn't like it... in the end, I never completed this one, and instead, I drew a jack-o-lantern.

CodePen: https://codepen.io/alvaromontoro/pen/YzdjdqE

---

## Impossible

![Cartoon parodying Mission:Impossible with a man hanging from a rope in front of a computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhasvl0z4xwtuuq3dkh3.jpg)

It was October 3, and I had to do something for "Artist"... but my brain kept coming to the previous day's word: "Impossible", so I drew this animated parody of Mission:Impossible (and then did the Picasso cartoon).

CodePen: https://codepen.io/alvaromontoro/pen/LYMBqqo

---

## Fake

![Caricature of Donald Trump saying 'fake news'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbinfkr4e3tobk851ws2.jpg)

I did two versions of this cartoon. [The initial one was more of a bobblehead](https://codepen.io/alvaromontoro/pen/VwgYzNP), and I didn't like it because the head looked too round and big. This one may be less of a caricature, but I prefer it. Maybe something in between would be better?

CodePen: https://codepen.io/alvaromontoro/pen/BaMNMrP

---

## Handmade

![Cartoon of a hand projecting shadows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ste0el72yiti7xhvmrwl.jpg)

What is more handmade than a hand shadow? As mentioned above, I hate drawing hands... so why not practice drawing some more? I like it in general, but that thumb is... oof!

CodePen: https://codepen.io/alvaromontoro/pen/VwgeQgm

---

# Conclusion

At the beginning of October, I had decided not to participate in this year's Divtober. I had done it a couple of years in a row, and it was fun, but it requires too much "commitment." In the end, I must admit it was fun participating, but don't know if I'll do it next year. There are so many October challenges: divtober, inktober, clocktober... It's time to pick a different one and enjoy it, too.