Animated shape divider

Full motion specification

How the movement works

Use it where section edges should look soft rather than ruled, on sites about the sea, summer or children, for example.

1. 01A 511 × 168 viewport: a blue gradient section on top (#3B64E8 → #8FA9F7) and a white section below, with two wave shapes layered at the boundary. One loop takes 4.7 s (two per 9.4 s pack cycle).
2. 02Back wave (white, opacity 0.45): centered at y = 100, the sum of a sine with wavelength 260 px, amplitude 8 px and one with wavelength 130 px, amplitude 4 px.
3. 03Front wave (white): centered at y = 110, wavelength 300 px / amplitude 9 px plus wavelength 110 px / amplitude 3.5 px; it runs into the white section below.
4. 04With phase a = 2π·t/4.7, the back wave uses a + 1 and −2a, the front wave −a and 2a + 0.5. The two sines in each wave run in opposite directions, so the shape keeps changing and returns to where it started every 4.7 s.