Rainbow Circles I

100%

Rainbow Circles I

✓ Published1🌍 Public

Last edited May 23, 2020

Created on May 23, 2020

A set of 99 concentric circles radiates from the center of an SVG canvas, each ring rendered in a randomly generated RGB color. The circles grow in 10-pixel increments, creating a vivid, rainbow-like target pattern. Built with React, the visualization uses functional components and props to map over a predefined array of radii, while the SVG `circle` element draws each stroke with a fixed width and no fill. The random color assignment per circle produces a unique, non-repeating palette across the full 960 by 500 pixel viewport.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Rainbow Circles

This example renders a series of concentric circles centered on an SVG canvas, with each circle’s radius increasing by a fixed pixel increment. The stroke color of every circle is randomly generated using the `rgb()` function with values between 0 and 250. Implemented in React with ReactDOM, the visualization maps an array of radius values to SVG `<circle>` elements, producing a multicolored, nested-ring pattern reminiscent of a rainbow.

NNita

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

89% match

Loading thumbnail…

Concentric circles

NNita

89% match

Loading thumbnail…

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.

NNita

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

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

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

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

83% match