slinky

100%

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on May 28, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

spinning-spiral

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.

11wheel

81% 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…

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

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

75% match

Loading thumbnail…

Svelte app

A real-time animated wave of 50 circles and connecting lines renders in an SVG, with vertical positions computed by a sinusoidal function of time. The Svelte 3 component uses `requestAnimationFrame` to update the array of numbers each frame, while `{#each}` blocks bind the data to circle and line elements. This experiment demonstrates reactive updates in Svelte for smooth, declarative animation without explicit DOM manipulation.

CCurran Kelleher

74% match

Loading thumbnail…

Sine Wave Circles

A row of white circles animates vertically to form a flowing sine wave. The visualization uses D3 v4 to bind an array of 40 numbers to SVG circle elements, positioning each along the x-axis. A `d3.timer` continuously updates each circle’s y-coordinate based on the sine of its index plus elapsed time, creating the wave effect. The circles are evenly spaced with a fixed radius, rendered on a black background.

CCurran Kelleher

74% match

Loading thumbnail…

Svelte + D3: Random Lines

This example generates fifty random-walk lines, each drawn as a smooth, semi-transparent colored path that re-randomizes every two seconds. Svelte’s `tweened` motion and `interpolatePath` from d3-interpolate-path animate the transition between the old and new line shapes. The code uses D3’s `scaleLinear`, `line`, and `curveNatural` to map data points to SVG coordinates, while Svelte’s `bind:clientWidth` and `bind:clientHeight` make the visualization responsive to container size.

MMatthias Stahl

74% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

74% match