Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Concentric circles -linear gradient

Public visualization

Viewing a saved revision (read-only)

5a1d6fcb6c044d1ab278941bc1df498f

Concentric circles -linear gradient

4 stars0🌍 Public
NNita
Last edited May 22, 2020
Created on May 22, 2020

This example renders concentric circles with a linear gradient background, creating a visual field of overlapping, transparent rings. The React component `Circles` outputs SVG `<circle>` elements, positioned using trigonometric calculations with random multipliers in the `index.js` file. The circles use the `radialGradient` definition to fill with a Saturn-like color scheme, while a drop shadow filter adds depth. The rendering is driven by React’s `ReactDOM.render` into an SVG element, with the background set via CSS linear gradient.

AI-generated description

React Starter code.