Rainbow spinner

100%

Rainbow spinner

✓ Published0🌍 Public

Last edited May 6, 2017

Created on May 6, 2017

A colorful rainbow spinner animates in an endless looping arc, rendered as a thick ring of 181 SVG path segments, each filled with a distinct hue from the d3.interpolateRainbow scale. The entire ring rotates continuously via a d3.timer, while a clip-path stretches and contracts the visible arc using transition.attrTween to interpolate the starting and ending angles. This example is built with D3 v4 and SVG, with the rainbow gradient encoded directly into each path’s fill and stroke.

AI-generated description

An Android-style loading spinner with a touch of rainbow.

Canvas would probably be a better idea.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/5bc85fa785c151be8fe54970bba70ca6'>Rainbow spinner</a>

mit Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Rainbow Circle

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.

Mmbostock

80% match

Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

SSubhendu Karmakar

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

77% match

Loading thumbnail…

Rainbow Worm

A rainbow-colored, segmented worm undulates across a dark background. The animation continuously reshapes the sine wave path, with each segment’s hue mapped from its horizontal position via an HSL color scale. Built with D3.js v3, the visualization uses SVG paths and a timer-driven update loop. The code manually computes thick, joined strokes for each quad of points, with width and color varying by segment, recreating the peristaltic motion from the original Protovis example.

FFrissAnalytics

75% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

74% match

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

73% match