Animation by MesmerizingSpirals.com. Discover more mesmerizing spiral animations!
This animation features spiraling concentric circles that rotate at different speeds, creating a mesmerizing spiral effect. Here's how it works: 1. The HTML sets up a fullscreen canvas and some controls for adjusting the number of circles and rotation speed. 2. The JavaScript initializes arrays to store each circle's radius, rotation speed, and hue. 3. The updateSettings() function is called whenever the controls are adjusted. It updates numCircles and rotateSpeed, then recalculates the radius, speed and hue for each circle. 4. The draw() function, called each animation frame: - Clears the canvas - Loops through each circle - Calculates the current position based on radius, speed and elapsed time - Fills the circle with the color based on its hue value - Reduces opacity for outer circles to emphasize the spiral 5. The t variable accumulates a small value each frame to animate the rotation over time. 6. The onresize handler ensures the animation fills the window even if resized. The result is a captivating, colorful spiral that the user can customize by changing the number of circles and rotation speed. The individual circles orbiting at different rates create a hypnotic spiraling tunnel effect. Feel free to explore further variations by modifying the color scheme, circle opacity, size ratios, etc. The simple concentric circles setup provides an attractive foundation for all kinds of creative spiral designs! Let me know if you have any other questions!