Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sine Wave Circles Playground

Public visualization

Sine Wave Circles Playground

0 stars0🌍 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.

Comments

Sign in to join the discussion.

MIT Licensed