DEV Community

Cover image for Divtober Day 3: Quick
Alvaro Montoro
Alvaro Montoro

Posted on

Divtober Day 3: Quick

An animated version of Aesop's The Hare and the Tortoise drawn using CSS and a single HTML element for Divtober:

If it goes too quick (or is it fast?), here is a screenshot of the animation:

A tortoise on a skateboard with a rocket attached to its shell reaches the finish line (with the word Meta in Spanish) ahead of a sad/surprised hare

Something I learned from coding this one: Safari has some type of problem with the radial gradients when they have a value of 100%. It shows them squared. An easy hacky solution: use 99.9% instead of 100%.

Top comments (4)

grahamthedev profile image
GrahamTheDev • Edited

Your div should probably have role=“image”.

Other than that this is both super impressive and is a very clever idea for “quick”…love it!

Did you not do day 2 or have I missed it? ❤️

afif profile image
Temani Afif

better follow the divtober hashtag: the real game is on twitter 😉

alvaromontoro profile image
Alvaro Montoro

Updated the role. Thank you!

I did code something for day 2, it was just ok so I didn't put it here:

grahamthedev profile image

Still love it, I am liking the outside of the box thinking for each of the challenges!