circle-braid

100%

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on May 28, 2015

Two animated paths form interwoven circle-like braids against a dark background. The visualization uses a timer to continuously update the points along each path, with their radii modulated by a triangle wave that shifts over time, creating a breathing, twisting effect. Built with D3 v3, it renders SVG paths whose coordinates are recalculated each frame from trigonometric functions, while the data is generated procedurally rather than loaded from an external source.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo

76% match

Loading thumbnail…

D3 Circle animation

Eight red circles animate simultaneously along straight paths within a large circular outline on a white background. Each circle travels from a point on the circle’s perimeter toward the center, with staggered start times creating a rotating, pulsing effect. The animation uses SVG’s `animateMotion` element with the `path` attribute and staggered `begin` times, while the overall layout and styling come from static SVG markup with `mix-blend-mode: hard-light`. The example relies solely on native SVG animation, not D3’s JavaScript APIs.

AArturo Guevara

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

75% match

Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Mmbostock

75% match

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

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

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

74% match

Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais

74% match