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%.

Discussion (4)

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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? ❤️

Collapse
afif profile image
Temani Afif

better follow the divtober hashtag: https://twitter.com/hashtag/divtober?src=hashtag_click&f=live the real game is on twitter 😉

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Updated the role. Thank you!

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

Collapse
inhuofficial profile image
InHuOfficial

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