Dynamic Wave Pool 🌊

An interactive animation experiment using conic gradients. This started with just one spinning Conic Gradient circle and developed from more and more ideas to simulate wave patterns. Customise speed, color, and geometry in real-time to explore the power of pure CSS motion.

Links 🔗

• Play live demo
• Explore Github repo

How it works ⚙️

• The wave pattern is made up of 100 spinning circles
• Each circle uses a conic-gradient background to make a 4-quartered circle
• With each 360 degree rotation the opacity transitions from 0 to 1
• The varied animation delay creates the wave effect
• The animation can be paused and randomised
• The overall speed, colour, corners and shape are controlled by the sliders using the setProperty method

Using the setProperty method

The setProperty method uses the value from each slider to set the property of the CSS style declaration object. For example, if the value of speed is 0.5 seconds the --speed property in the CSS is set like this:

document.documentElement.style.setProperty('--speed', '0.5s')

Conic Gradients

Each spinning circle has a background which is a conic gradient made up of 4 quarter. The conic-gradient CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).

Here is an example of a conic gradient:

background: conic-gradient( 
  black 0deg 90deg, 
  green 90deg 180deg, 
  black 180deg 270deg,
  turquoise 270deg
);