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!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More