spinning-spiral

100%

spinning-spiral

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on Aug 13, 2015

A spiral of white line segments rotates continuously, expanding and contracting as its radial offset shifts over time. The animation uses D3’s `d3.timer` to update an array of 480 points each frame, computing polar coordinates with `d3.scale.linear` for angle and distance, then rendering them as SVG `path` elements with `join('L')`. The code draws a single path whose data changes cyclically based on a sine wave, producing a smooth pulsing motion against a dark background.

AI-generated description

Remake of http://beesandbombs.tumblr.com/post/118139231509/from-the-archive

Similar vizzes

Loading thumbnail…

slinky

A single white line repeatedly traces the outline of a circle, but its shape is continuously warped by a sinusoidal modulation that scales and rotates each point’s radial position. The animation cycles through several periods of this distortion, making the circle appear to coil and uncoil like a slinky. The code uses D3’s `d3.timer` to update a `path` element, computing new coordinates for 1,000 sample points via a transformation that multiplies the base circle’s x- and y-coordinates by cosine and sine of the angle multiplied by a time-varying factor. The rendering relies on an SVG `path` with a thick white stroke over a dark background, leveraging the lodash and d3-jetpack helper libraries for utilities and concise syntax.

11wheel

81% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

78% match

Loading thumbnail…

sine-line

A full-screen SVG animation renders a horizontal line of 30 white circles that undulate vertically in a sine wave pattern. The circles’ y-positions are computed with `Math.sin`, incorporating the animation time from `d3.timer`. The code uses d3 selections, `d3.scaleLinear` for spacing, and lodash-style helpers, remaking a p5.js example in D3.

11wheel

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

78% match

Loading thumbnail…

A tweetable d3 animation

A single animated SVG visualization shows 100 circles arranged in a shifting radial pattern. The code uses a `d3.timer` loop to update circle positions, with each circle’s radius and angle computed via sine and cosine functions. The circles are drawn with D3’s `selectAll` and `data` join, appended to an SVG group element. Styling is minimal, with unfilled circles stroked in dark gray on a light background. The animation continuously couples each circle’s distance from the center to time, creating a pulsating, spiral-like effect.

CColinEberhardt

77% match

Loading thumbnail…

svg voroni spiral

This example shows a static Voronoi tessellation over a set of random points, with animated spiraling lines tracing each polygon’s edges in sequence. It uses D3’s `d3.geom.voronoi` to compute the polygons from 40 random vertices, clipping them to the SVG canvas, and renders them as SVG `<path>` elements. The animation repeatedly shifts a point along each polygon’s perimeter, drawing a new line segment between consecutive points using `setInterval` and updating the `d` attribute of appended paths. The code relies on D3 3.5.5 and custom helper libraries (`d3-jetpack` and `d3-starterkit`) for concise SVG manipulation, with the overall rendering purely vector-based in SVG.

11wheel

76% match

Loading thumbnail…

Spiral Triangle II

Three rotating triangles made of small squares converge in the center, with each square cycling through a smooth cubehelix color palette. The animation uses multiple `d3.timer` callbacks to update square positions and rotations, while `d3.scale.cubehelix` maps time-based domain values to color. Sixty squares per triangle move horizontally and spin at a constant angular speed, clipped to two regions that divide the SVG canvas. The code relies on D3 v3 selection methods and SVG transforms to coordinate the layered motion.

Mmbostock

75% match

Loading thumbnail…

Spiral Intersection Design

A spiral of intersection emerges from concentric black and white circles, with a web of white lines radiating from the center and connecting points around a circular path. The design uses D3 v5 to generate 25 points, map them into spokes, and create wheel-like connections between every ninth point. Built with SVG, the code draws these lines with a stroke width of five, layered over the static circle pattern, all rendered against a black background.

VVarun Eranki

74% match