Concentric circles

100%

Concentric circles

✓ Published1🌍 Public

Last edited Mar 12, 2020

Created on Mar 12, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Concentric circles

NNita

100% 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

92% 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

92% 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

92% match

Loading thumbnail…

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.

NNita

91% match

Loading thumbnail…

Concentric circles -linear gradient

This example shows a field of concentric circles arranged around a central point, where each circle’s radius varies randomly and the overall composition suggests a glowing, planet-like form. The visualization is rendered as an SVG using React components, with each circle’s position calculated from trigonometric functions and a pixel-based loop. The code defines a radial gradient and a drop-shadow filter, while the background uses a CSS linear gradient from green to black. The `Circles` component receives `cx`, `cy`, `r`, and fill props, with random sizing and color values generated via JavaScript’s `Math.random()`.

NNita

91% match

Loading thumbnail…

Concentric circles -linear gradient

A generative visualization renders concentric circles with a linear gradient background. The React component maps over 50 array indices and nested pixel values to position 2,500 semi-transparent circles, using trigonometric functions and random scaling to scatter them from the center. Each circle applies a radial gradient via SVG `<radialGradient>` and a drop-shadow filter. The SVG output uses React’s `createElement` under the hood, with colors derived from index-based RGB values and random opacity, creating a layered, luminous effect against the teal-to-grey backdrop.

NNita

90% match

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

90% match