CSS Animation Lab

YUI-INSPIRED (Build-less Edition)

Geometric Art

Code View

Select an animation to see CSS variables.

--i: 0;

Math Note

Exploring the geometry of sin and cos in CSS animations.

By using Math.sin(angle) and Math.cos(angle), we can distribute elements evenly around a circle:

x = radius * Math.cos(angle);
y = radius * Math.sin(angle);

In this project, we inject these calculated values as CSS variables to drive high-performance animations.