Rainbow Circle

100%

Rainbow Circle

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 11, 2015

A rainbow ring is constructed from 500 individual SVG path segments, each an arc slice that together form a circular band. The color of each slice encodes its angular position via the HSL color space, creating a smooth spectral gradient around the circle. The example uses D3 v3’s `d3.svg.arc` to generate the path geometries and `d3.hsl` to compute fill colors, with segment angles derived from a range over 2π radians. The rendering is entirely SVG, placed within a 960 by 960 pixel viewport.

AI-generated description

gpl-3.0 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

81% match

Loading thumbnail…

Rainbow Circles I

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.

NNita

81% match

Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Mmbostock

80% match

Loading thumbnail…

Rainbow spinner

Animated SVG loading spinner renders 181 rainbow-colored arc segments using D3's `d3.arc` and `d3.interpolateRainbow`. The 960×500 canvas orbits the spinner around its center via `d3.timer`, while a clip path continuously stretches a plain arc's angle using `transition.attrTween`, alternating between expanding and contracting to mimic an Android-style loader.

FFrissAnalytics

76% match

Loading thumbnail…

Rainbow spinner #2

This example displays a continuously rotating rainbow ring on a canvas, with a white gap that stretches and shrinks as the animation cycles. The code uses d3.arc with a canvas 2D context to draw 181 colored segments, each filled and stroked with d3.interpolateRainbow. A d3.timer drives the rotation by updating an angle offset, while d3.select transition with a custom tween on "angle" alternately stretches the start or end edge of the gap, creating a rhythmic pulsing effect.

FFrissAnalytics

76% match

Loading thumbnail…

Radial Colors

This radial visualization generates a circular patchwork of colored arcs by iterating a Lindenmayer system 20 times, starting from a single symbol and expanding it through string-rewriting rules. Each iteration produces a ring of segments, with arc angles determined by d3.scaleBand and radii mapped from the iteration count. The SVG paths are rendered using d3.arc, while colors derive from d3.schemeAccent via d3.scaleOrdinal. The pseudorandom pattern emerges from the L-system rules defined in the code, with data generated procedurally rather than sourced externally.

CCurran Kelleher

74% match

Loading thumbnail…

Circular Layout (Raindrops)

A circular layout of raindrop-shaped paths radiates from the center, each filled with a shared linear gradient that shifts from pale blue to deep navy. A random size and radial distance are applied to each of the 358 shapes, creating a scattered, organic dispersion. Built with D3 v3 and SVG, the example constructs each raindrop using a custom path generator that calculates a circle with a pointed tail based on a size parameter. The transform attribute combines rotation and translation to position every drop around the circle.

Mmbostock

74% match

Loading thumbnail…

Geodesic Rainbow

A glowing, rainbow-hued geodesic sphere rotates in space, its surface composed of triangular faces whose colors and edges shift continuously. An interactive slider adjusts the degree of subdivision, morphing the shape from a coarse icosahedron into a finely tessellated ball. Built with d3.geodesic and d3.geo.orthographic, the drawing renders to a Canvas context, with each face dynamically recolored via d3.hsl and rotated over time using d3.timer.

Mmbostock

73% match