Spiral Animation - CSS Mathematical Patterns

How It Works

This spiral animation uses a clever combination of CSS transforms to create a mathematical spiral pattern. Each particle follows the same path but starts at a different time using animation-delay.

            The Spiral Formula:

            rotate(angle) + translateX(radius) = polar coordinates

            As the animation progresses:

            • Rotation increases from 0° to 1440° (4 full rotations)

            • Translation increases from 0 to 450px

            • Scale decreases from 1 to 0.2

            • This creates an outward spiral effect

The magic happens because translateX() moves the element along its current rotated axis. As we rotate AND translate simultaneously, the element traces a spiral path through 2D space.

Try modifying the --spiral-radius, --spiral-duration, or rotation values in the CSS to create different spiral patterns!