Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles and rectangles grid

Public visualization

Viewing a saved revision (read-only)

f2c30e40c4254414b4c48076f2176f14

Circles and rectangles grid

1 star0🌍 Public
NNita
Last edited Dec 11, 2018
Created on Dec 7, 2018

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

AI-generated description