Circles Pack

100%

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Mar 5, 2020

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles Pack

This visualization shows a large grid of concentric circles arranged in a repeating pattern across an SVG canvas. The circles are drawn with green outlines, a stroke width of 8, and 0.8 opacity, creating a dense, mosaic-like texture. The code uses React to render the SVG elements, with a custom `Circles` component that wraps the native SVG `<circle>` element. It generates 20 distinct radii and maps them over a 5×5 grid of positions, scaling the entire group by 0.4. ReactDOM mounts the tree to the DOM, and the page uses the UMD production builds of React 16.10.0.

NNita

94% match

Loading thumbnail…

Circles Pack

This example displays a tightly packed grid of red, empty circles arranged in a square formation across an SVG canvas. The visualization generates 10 rows and 10 columns of circles, each with a fixed radius, positioned at regular intervals. React components produce the circles, while the code manually constructs arrays for positioning and radius calculations without using external data libraries. The circles use SVG properties such as opacity, stroke color, and fill to render the final pattern.

NNita

93% match

Loading thumbnail…

Circles Pack

A circular layering effect shows thirty concentric rings radiating from the center of an SVG canvas. Each ring is drawn with a radius that increases linearly from 10 to 310 units, grouped and scaled down to 30% of its original size. The visualization uses React with explicit ReactDOM rendering, defining a `Circles` component that returns an SVG `<circle>` element with semi-transparent red strokes. All rings share the same vertical center, creating a nested target-like pattern with visible overlapping strokes.

NNita

90% match

Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita

87% match

Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered within a larger bounding circle, creating a compact cluster effect. The visualization uses React to render SVG circles, with each circle’s position derived from nested loops over coordinate arrays, then filtered by a radial distance check. Random offsets are applied to each circle’s x and y coordinates, producing a dispersed pattern inside the main circular boundary. The example demonstrates a simple generative layout using React’s `map` method and SVG `<circle>` elements.

NNita

86% match

Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered inside a large bounding circle, creating a roughly uniform field of overlapping dots. The visualization uses React to render SVG elements, with nested `Array.map` calls generating the circles. Each circle’s position is determined by multiplying array values with `Math.random()`, producing a semi-random distribution within the 960×500 viewport. The code defines constants for the outer radius (400) and inner radius (40), and uses ReactDOM to mount the component, with no external data or interaction.

NNita

85% match

Loading thumbnail…

Circles with random color picker

This example renders a grid of circles on an SVG canvas using React. The visualization generates 201 circles positioned along the x-axis at regular increments, with random y-coordinates between 0 and 400. Each circle’s fill color is determined by its index position, producing an RGB value that shifts across the spectrum. The code uses React’s `ReactDOM.render` to mount the component and maps over an array to create the SVG circle elements. A fixed viewport of 960 by 500 pixels contains the randomly scattered circles against a light green background.

NNita

85% match

Loading thumbnail…

Concentric circles

A set of nested, gradient-filled circles radiates from the center of an SVG canvas, forming a concentric, peacock-like pattern. Each circle’s position and radius are computed from a fixed number of angular steps and radial distances, with randomness applied to the radius and color values. Built with React and rendered as SVG elements, the visualization uses a reusable `Circles` component and defines a radial gradient (`#gradient-Saturn`) and a drop-shadow filter to style the shapes. The static composition is generated entirely in JavaScript without external data.

NNita

84% match