CSS animation of a classic optical illusion of rotating items.

I originally started this mini project around... 2016-2017 maybe? Back then I got pretty close to finishing it but I had taken a very manual approach to build it and when the math didn't line up I just put it aside.

After finding it in the archives I settled to finish it and share it. Now with much wider support of var() and calc() it was pretty easy to build the values required and make them dynamic so that they can be controlled from a few variables.

Now... No, I most certainly did not choose the easiest way to build this. For some reason I was somewhat obsessed with circle math around that time. (Probably related to my job at InterConnecta back then and their general use of circles.)

Anyway... the animation here calculates the (x, y) coordinates of the start and end positions of each circle and these are then assigned to their respective keyframes. This ends up requiring multiplying the given ratio for the √2 and getting the sin() and cos() of an angle. So... pretty interesting but... it could've been done by simply rotating a container and making the circles go from one extreme to the other of it 😅.

Wanna play some code golf? Would be happy to see what other approaches people take!