Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles Pack

Public visualization

Viewing a saved revision (read-only)

89817e269a1644faab9f87e774d0d8cf

Circles Pack

0 stars0🌍 Public
NNita
Last edited Mar 5, 2020
Created on Mar 5, 2020
Forked from Circles Pack

A grid of concentric circle packs, each rendered with a red stroke, semi-transparent fill, and varying radii, fills an SVG viewport. The visualization uses React components to generate a 10x10 matrix of circle clusters, with each cluster positioned at coordinates derived from an array of values. The circles are drawn using SVG `<circle>` elements via the custom `Circles` component, which accepts props for radius, position, stroke, and opacity. The code leverages React’s declarative rendering and JavaScript array mapping to systematically plot 100 nested circle groups.

AI-generated description

React Starter code.