Concentric circles

100%

Concentric circles

✓ Published1🌍 Public

Last edited Mar 13, 2020

Created on Mar 13, 2020

A dense field of concentric-circle shapes fills the screen, each one a warped, flower-like path rendered in a gradient of randomized RGB colors. The code generates 500 copies of the same SVG path, positioning each with random translation and scaling transforms. Built with React and SVG, it uses the `Path` component and array mapping to create the overlapping, chaotic composition against a multi-hued linear gradient background.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Concentric circles

This example renders a chaotic, organic field of concentric-circle patterns. A single complex SVG path is drawn repeatedly at random translations and scales, creating layered, overlapping abstract forms that drift across a black background. Each instance of the path is filled with a color derived from its index in a 300-element loop, using a mathematical formula to produce varied RGB values. The visualization relies on React for component structure and SVG for rendering, with the `Path` component defining the intricate shape and the main `App` component managing the layout through random transform coordinates.

NNita

93% match

Loading thumbnail…

Concentric circles

A field of overlapping concentric-circle shapes scatters across the screen. The number of shapes and their positions are determined by a loop that generates 300 copies, each translated randomly along the X and Y axes using `Math.random()` calls. The SVG `Path` component, defined in a separate file, draws a flower-like form with concentric circles for each instance. React manages the rendering, while the CSS background applies a vertical gradient from red through orange, yellow, and green to black.

NNita

93% match

Loading thumbnail…

Concentric circles

A collection of randomly placed, scaled concentric circle shapes fills the screen. The background is a vertical gradient transitioning through red, orange, yellow, green, and black. The React app renders 300 SVG path elements, each using a `Path` component with a fill color generated from random RGB values. Each shape is positioned and scaled via a `transform` attribute that combines random translation and a fixed scale, creating a scattered, overlapping pattern across the canvas.

NNita

93% match

Loading thumbnail…

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.

NNita

92% match

Loading thumbnail…

Concentric circles

A dynamic field of concentric, ring-shaped paths overlaps and scatters across the canvas. Each path is a complex, closed vector curve rendered in SVG, colored with an RGB fill that shifts based on its index and a random factor. The React application maps over an array of 300 items, translating each path to a random position within the viewport. The background presents a linear gradient transitioning through red, orange, yellow, green, and black, creating a vibrant backdrop for the overlapping shapes.

NNita

92% match

Loading thumbnail…

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.

NNita

91% match

Loading thumbnail…

Concentric circles

A generative artwork renders hundreds of distorted heart-like shapes as concentric, overlapping circles. Built with React and SVG, the code maps an array of 300 indices to paths, each positioned randomly and scaled, with fill colors derived from the index values. The `Path` component defines a complex outline, and the background uses a linear gradient. The result is a dense, colorful composition that emerges from the interplay of simple transformations and random values.

NNita

91% match

Loading thumbnail…

Concentric circles

A field of concentric circle motifs radiates outward from the center of the viewport, each rendered as an irregular ring with a subtle gradient fill. The shapes are generated by mapping a single SVG path across a 10x10 grid, where each instance is randomly offset and scaled. The code uses React to map over two arrays, computing positions with sine and cosine, and applies a radial gradient and drop shadow filter. A multi-color linear gradient background provides contrast.

NNita

90% match