CodeNewbie Community 🌱

Cover image for Divtober Drawings
Álvaro Montoro
Álvaro Montoro

Posted on • Originally published at alvaromontoro.com

Divtober Drawings

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:

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

A cartoon of a pizza holding a microphone, singing, and dancing

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 (0)