Lynn Fisher is an amazing CSS Artist, and she is especially great at creating CSS drawings using just a single HTML element. In October, she organizes Divtober, a one-month challenge in which she draws CSS art based on different topics (and encourages other to participate, too). This is the list for this year:
I decided to try the challenge this year. Here are the drawings I've done (so far) for days 1-11. All of them should be visible in the main browsers, but not all of them will be animated on all browsers.
An animated ceiling fan that starts moving when you pulled the string.
A Neighborhood Watch sign.
An animated version of Aesop's The Hare (the tortoise is quick but you may notice it's cheating by going on a rocket-propelled skateboard).
An animated explanation of how a
for loop works.
A tired man falling asleep.
A hungry-hungry hippo (not a big fan of this one, to be honest).
A glowing toxic waste barrel. With video of how it was done!
A small animation of a tree growing from the ground.
Two words are homonyms if they are written the same but mean different things. So I went with an animation in which a paper boat sinks in a sink.
This was a tough one. I opted for drawing a member of a 1920s organized crime family. While I like the end result, this was not a good choice for CSS.
A singing slice of pizza. By using the
<audio> element, I was able to add some music (you may need to click on the pizza for it to start singing).