Rainbow Worm

100%

✓ Published0🌍 Public

Last edited Nov 26, 2018

Created on Nov 28, 2012

A rainbow-colored worm undulates across a dark field, its sinusoidal body shifting with a peristaltic motion. The animation renders the worm as a sequence of thick path segments, each filled with a hue from the HSL color space based on its position. The code uses D3 v3 to compute and update the paths, with the `d3.timer` driving the animation. The lineJoin function calculates the stroke outlines to create a continuous, tube-like shape that varies in thickness and color as it moves.

AI-generated description

A recreation of an earlier Protovis example, reminiscent of peristalsis.

gpl-3.0 Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Blobbing Worms

Three layers of green, blue, and red worm-like particles wander across the screen, each layer merging into blobs through clipped radial-gradient circles. Closer particles appear brighter, with opacity increasing as they approach. The animation uses SimplexNoise for smooth, organic movement, while D3.js’s `distanceLimitedVoronoi` technique clips each circle to its Voronoi cell, creating the merging effect. Each layer is rendered as an SVG group, and d3.timer drives the animation loop.

KKcnarf

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

72% match

Loading thumbnail…

Worm-5

A growing chain of circles undulates across a violet background, its length and radius expanding over time. The animation uses a repeating interval to update a dataset, repositioning each circle along a sine wave while shifting its fill color from green toward darker tones. Built with D3 v7, the code generates data procedurally via `dataMaker.js` and renders SVG circles with chained `.join()` calls in `vizMaker.js`, applying animated attributes for x, y, radius, and fill. Strokes remain white for contrast.

YYiorgos Bagakis

72% match

Loading thumbnail…

Spermatozoa

Black tadpole-like forms with white elliptical heads and curved tails swim across a black canvas. One hundred spermatozoa each follow a path of twelve points, moving with sinusoidal tail undulations and bouncing off the boundaries. Built with D3 v3, the animation uses SVG elements—ellipses for heads and paths for tails—updated each frame by a `d3.timer`. Position and rotation come from velocity calculations, while tail curvature emerges from a spring-like point-chasing algorithm.

Mmbostock

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

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

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

69% match