DEV Community

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

Posted on

7 3

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)

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

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

Updated the role. Thank you!

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more