Skip to main content
100%

Sine Wave Circles Playground

✓ Published0🌍 Public
AAndre J Denais
Last edited Aug 12, 2022
Created on Aug 11, 2022

A grid of 300 white circles forms a static horizontal row that animates vertically as a sine wave, creating a fluid, undulating pattern across a black background. The animation uses D3 v7's `d3.timer` to continuously update each circle's `cy` attribute based on the sine of its index and elapsed time. Written in ES6 and ported from an older bl.ocks.org example, this SVG-based playground demonstrates how math functions can drive simple shapes into organic motion.

AI-generated description

A D3 version of the Math Sine Wave P5.js example.

Ported to ES6 from an older version: bl.ocks.org: Sine Wave Circles with blockbuilder.org.

MIT Licensed

Similar vizzes