Lynn Fisher is an amazing CSS Artist, and she is especially great at creating CSS drawings using just a single HTML element among many other projects she does (Nestflix is a lot of fun!)
In October, she organized #divtober, a one-month challenge in which she drew (and encouraged others to participate too) CSS art based on different topics. The condition: use just one HTML element. This was the list for this year:
Lynn Fisher@lynnandtonic
October is already going to be busy busy, but let’s do this! 😅
#divtober 2021: a.singlediv.com/divtober2021/16:52 PM - 28 Sep 2021
In the past, I have done CSS art, but with multiple elements, so I decided to join the challenge and draw with CSS using a single HTML element for a change. Here are the drawings I did:
Day 1: Fan
This 3D-looking fan is interactive: pull the string to make it work.
Day 2: Watch
Day 3: Quick
Day 4: Loop
An animated explanation of how a for loop works (I know, it's not a drawing per se, but it is interesting)
Day 5: Tired
Day 6: Hungry
Day 7: Toxic
I recorded the process for this one and shared it on Youtube. Later, I'd do the same with other drawings.
Day 8: Growing
Day 9: Homonym
Homonyms are words that are written the same but have different meanings. So I drew a paper boat sinking in a bathroom sink.
Day 10: Organized
A 1920s member of the organized crime. I like this drawing, but it's an example of something that would be 1,000 times better and easier using SVG.
Day 11: Slice
I removed the demo from this day because it has autoplay audio and it can be a bit annoying. You can see it live on this link
Day 12: Squeak
Day 13: Camouflage
Day 14: Fancy
...And the video of how it was done:
Day 15: Float
This cartoon was based on a previous cartoon I had done (using multiple elements). Here's the video of how it was done:
Day 16: Snow
I did to entries for snow. One was an abominable snowman...
...and the other one was a snowfall animation using a single element (beware, your computer fans may start overworking with it).
Day 17: Stack
This and the following day, I didn't have many ideas and went for easy drawings.
Day 18: Shine
Day 19: Nostalgia
What's more nostalgic than a cassette with music recorded directly from the radio?
...and the video of how it was done.
Day 20: Journey
This was a weird one. I tried to do a The Wizard of Oz homage but ended up with something too abstract and simplistic.
Day 21: Magic
A magic trick with CSS and a single HTML element. Will the Great Wizard Al guess your card and remove it from the deck?
Day 22: Critter
And how this bunny(?) was drawn:
Day 23: Loud
I tried to go with a realistic drawing this time. Something "easy": a volume knob that goes up to 11.
Day 24: Smelly
Silly/childish me decided to code a demo combining #23 (loud) and #24 (smelly) using <audio>:
Day 25: Dip
Day 26: Spice
Another realistic attempt: a bottle of spices. This may take a second to load:
...and how it was done:
Day 27: Film
Day 28: Dots
There's a second version of this that only works on Chrome, and I personally like it better.
Day 29: Fruit
Another day in which I did two drawings. First I tried doing a still nature:
...but I didn't like how it was going, so I drew a cute watermelon, and shared the process on Youtube.
Day 30: Contrast
Day 31: Spooky
Halloween Day and the word was "spooky", I tried different things, as I wasn't convinced by them:
The word spooky replacing the O's with a skull and a ghost:
A ghost (and how it was done):
And finally a Frankenstein's Monster with CSS and a single HTML element:
...with video too:
Conclusion
It was fun completing the challenge and trying different things with CSS and the background gradients. I learned some new things, found some differences between browsers, and enjoyed seeing what other people did (check the #divtober tag on Twitter).
But it's time to take a break. These challenges are more time-consuming and draining than what they look like. I will make more CSS art in the future but, for now, it will have more than a single HTML element.
Top comments (4)
Nice 🙂
Thanks! How did hacktoberfest go? I saw a lot of activity this year. How's Checka11y.css?