This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
This collection of CSS drawings was done as part of the Divtober challenge.
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. The list for this year was posted on Twitter:
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
Yet another with two drawings:
And the second one is interactive (slide the bar to the right and left to see the contrast between the summer and winter seasons on the same landscape):
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.
Originally published at https://alvaromontoro.com on November 1, 2021.
My Divtober 2021 Drawings was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
Alvaro Montoro | Sciencx (2021-11-02T02:38:31+00:00) My Divtober 2021 Drawings. Retrieved from https://www.scien.cx/2021/11/02/my-divtober-2021-drawings/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.