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