Spinning Rings Illusion

This animation is made by stacking circles one on top of another and spinning them about their origin at slightly different speeds. Each circle's animation is staggered according to its position within the order. Notice the patterns of overlap within the spinning rings- this is done using rgba colors with transparency. This allows the circles to overlap each other as they rotate. Original animation from Miriam Nadler.

Here is a single circle, following the same basic animation loop. A CSS keyframe animation is used to transform, or spin, the circle around the origin.

The circles are SVG (Scalable Vector Graphics) elements. SVGs are dope. Consider the following colorful circle. It's created using a single SVG image element and the inset shadow property for the depth effect. Inspiration for this illustration from Matys.