Concentric circles

Concentric circles

The visualization displays a dynamic collection of concentric circles scattered across the canvas. Each circle is rendered with a unique color derived from its index, creating a vibrant, randomized field. The example uses React to generate 300 SVG paths, each transformed with random translations and scaling. The `Path` component defines a complex, layered shape, while a radial gradient and drop shadow filter add depth. The code leverages ReactDOM for rendering and SVG for vector graphics, with a black background to enhance the visual contrast.

93% match

Concentric circles

Hundreds of small, concentric black-and-white circular path forms are scattered across a grey SVG canvas, each with a unique fill color derived from its index. The React app generates 300 shapes using the `map` function, positioning them randomly via the `translate` transform and scaling each by 0.5. The `Path` component contains an SVG path element, and the code includes a radialGradient definition and a shadow filter, though the gradient is commented out.

92% match

Concentric circles

A set of concentric circle shapes, each a complex layered path, is scattered across the canvas with random translations and scales. The SVG renders ten instances of the `Path` component, which is defined in JavaScript and drawn using a raw path string. Each instance’s fill color is computed dynamically from its index, creating a gradient of hues. The background uses a linear CSS gradient, while a radial gradient and drop shadow filter are defined in SVG `defs` but not applied. The code uses React for component rendering and ReactDOM to mount the app.

91% match

Concentric circles

A series of concentric circular paths renders as a layered, gradient-striped form against a rainbow background. Each of the one hundred paths is filled with a red-tinted color derived from its index, and random translations scatter them across the canvas. The visualization uses React with a custom SVG path component, applying a drop-shadow filter and scaling via the `transform` attribute.

91% match

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.

Concentric circles

This example displays a chaotic array of concentric circular shapes scattered across a gradient background. The code generates 300 instances of a custom SVG path component, each scaled by a factor of 0.3 and positioned using randomized translation values based on loop indices. The React application renders these paths within an SVG container, with each path filled using a dynamically computed RGB color that varies with the loop counter. The background uses a CSS linear gradient transitioning through red, orange, yellow, green, and black. The visualization demonstrates how repeated rendering of a single complex path can create a dense, colorful composition using React and SVG.

Concentric circles

This visualization displays a dense cluster of concentric circle outlines that scatter and overlap across the canvas, creating a chaotic, layered pattern. A React application maps an array of 300 indices to individual `<g>` elements, each rendering a complex, circular `Path` component with a randomly generated fill color. The SVG paths are positioned using random translations and a scaling transform, while the `fill` attribute is computed dynamically from the index and `Math.random()`, producing a vibrant, uncontrolled composition.

Concentric circles

A collection of concentric, heart-like vector paths overlaps and randomly scatters across the canvas, creating a dense, colorful field against a spectrum gradient background. The React application maps an array of 300 elements, generating each path with a random translate and scale transform, and fills each with a dynamically computed RGB color based on the loop index. Built with React and ReactDOM, the visualization renders the paths as SVG elements, with the background styled via a CSS linear gradient transitioning from red through orange, yellow, and green to black.