DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Divtober Drawings
Alvaro Montoro
Alvaro 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 (4)

Collapse
 
jackdomleo7 profile image
Jack Domleo

These are really great Amaro!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro Author

Thanks! How did hacktoberfest go? I saw a lot of activity this year. How's Checka11y.css?

Collapse
 
jackdomleo7 profile image
Jack Domleo

It went well, didn't get time to contribute to any other projects other than Checka11y.css, but that still counts towards Hacktoberfest, so I decided to plant a tree over receiving a t-shirt.
There were a lot of really positive contributions to the project too which was exciting. πŸ™‚

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro Author

Nice πŸ™‚

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.