user profile image

Watch me code this in ~13 minutes . Tested and fully works in WebKit browsers. Works partially in Firefox - positioning and motion is correct, but there's no rainbow as Firefox doesn't support calc() inside hsl(). Update: now works fully in Firefox as well. Completely broken in Edge as there's no support for calc() inside rotate() functions or as animation-delay.

If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out, please consider one of the following:

  • showing your appreciation with a donation:

donate button

  • getting me something from my Amazon WishList: πŸ‡ΊπŸ‡Έ / πŸ‡¬πŸ‡§
  • or at least sharing this to show the rest of the world what can be done with CSS on the web these days

Thank you!


  1. Wow, that is awesome!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.