Skip to main content
SimilarExport ZIP
100%

Concentric circles

✓ Published1🌍 Public
NNita
Last edited Mar 12, 2020
Created on Mar 12, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Concentric circles -linear gradient

This example displays a dense cluster of concentric circles radiating from the center of an SVG canvas, with each circle filled by a shared radial gradient that creates a Saturn-like golden tint. The React component maps over 50 indexed values and nested pixel steps, computing each circle’s position using cosine and sine functions multiplied by random distances, while the radius also varies randomly. The visualization uses React 16.10’s `ReactDOM.render`, a custom `Circles` component, and SVG `<circle>` elements, with an additional `feDropShadow` filter adding a cyan glow to the shapes.

NNita
93% match
Loading thumbnail…

Concentric circles -linear gradient

This example generates a dense, abstract field of concentric circles with a linear gradient background transitioning from dark blue to grey. The visualization employs a nested loop structure to map 80 angular steps and 80 radial steps, computing each circle’s position with trigonometric functions and randomized offsets. The React component `Circles` renders individual SVG `<circle>` elements, using a radial gradient definition (`#gradient-Saturn`) for fills and a drop-shadow filter. The `fill` property is dynamically assigned in `index.js` via a `radialGradient`, while the SVG canvas measures 960 by 500 pixels. The code relies on React’s `ReactDOM.render()` and maps over arrays to produce the pattern.

NNita
92% match
Loading thumbnail…

Concentric circles

The visualization displays a radiant, multi-hued field of concentric circles that emerge from a central point and spiral outward against a rainbow gradient background. Each circle’s size and color vary randomly, creating a dense, organic pattern. Built with React and rendered as SVG, the code maps over 50 indices and 50 pixel offsets, calculating each circle’s position using trigonometric sine and cosine functions. A radial gradient defined in the SVG `defs` section fills every circle, while a drop-shadow filter adds a cyan outline for depth.

NNita
92% match
Loading thumbnail…

Concentric circles

The visualization displays a radiant, multi-hued field of concentric circles that emerge from a central point and spiral outward against a rainbow gradient background. Each circle’s size and color vary randomly, creating a dense, organic pattern. Built with React and rendered as SVG, the code maps over 50 indices and 50 pixel offsets, calculating each circle’s position using trigonometric sine and cosine functions. A radial gradient defined in the SVG `defs` section fills every circle, while a drop-shadow filter adds a cyan outline for depth.

NNita
92% match
Loading thumbnail…

Concentric circles -linear gradient

A set of concentric circles radiates outward from the center of the screen, with each circle’s radius randomly scaled and its position offset along a circular path. The circles are rendered with React and SVG, using a shared radial gradient (`#gradient-Saturn`) that transitions from pale yellow to brown, creating a Saturn-like shading effect. A cyan drop shadow filter adds depth to each shape. The code generates 20 angular positions and 20 radial offsets, producing a grid of overlapping circles with randomized sizes.

NNita
91% match
Loading thumbnail…

Concentric circles

Concentric circles is a generative visualization that arranges overlapping circles into a dense, radial pattern centered on the screen, with each circle colored by a gradient from yellow to brown. The example uses React and SVG, with a `Circles` component rendering individual `<circle>` elements. The code calculates circle positions using cosine and sine functions over an array of indices and multiples of 50 pixels, while a radial gradient defined in `<defs>` and a drop shadow filter add visual depth. Fifty circles are drawn for each of fifty angles, creating a vibrant, flower-like composition.

NNita
91% match
Loading thumbnail…

Concentric circles

The visualization displays numerous scaled, path-based shapes scattered across a black canvas, each filled with a unique color generated from random and index-based RGB values. A radial gradient named “gradient-Saturn” is defined but not applied, while a cyan drop shadow filter is available. Built with React and rendered as SVG, the code maps over an array of 300 indices, translating each copy of a predefined `Path` element with random coordinates and a fixed scale of 0.5. The `Path` component uses a static SVG path data string.

NNita
90% match
Loading thumbnail…

Concentric circles -linear gradient

A generative SVG visualization renders concentric circles with a linear gradient background, using React components to map 50 angular positions across 50 radial steps. Each circle’s radius is randomly scaled and filled with a radial gradient defined in SVG defs, while the backdrop uses CSS linear-gradient. The code computes positions via Math.cos and Math.sin, and applies a drop-shadow filter with cyan glow.

NNita
90% match