- read

One HTML Tag. Thirty+ CSS Drawings — My Divtober 2023 Collection.

Alvaro Montoro 47

One HTML Tag. Thirty+ CSS Drawings — My Divtober 2023 Collection.

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.

Alvaro Montoro
Level Up Coding
Published in
9 min read1 day ago

--

You can find all these drawings (and many more) on 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

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

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

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