circle-lines

100%

✓ Published0🌍 Public

Last edited Oct 18, 2017

Created on Oct 18, 2017

Nine circles arranged in a grid have points that orbit their centers, connected by lines between every pair of circles. The lines form a dynamic, web-like pattern that evolves over time. Built with D3.js, the visualization uses a canvas element with the `globalCompositeOperation` set to `xor` to create the intersecting line effects. An animation loop driven by `d3.timer` updates the positions of the orbiting points and redraws the connections, creating a continuously changing geometric composition.

AI-generated description

https://twitter.com/beesandbombs/status/919754537468071936 with some xor

p5 version

Similar vizzes

Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

MMTR

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

79% match

Loading thumbnail…

Circles with D3

A D3.js visualization renders seven semi-transparent circles on an SVG canvas, each positioned by x/y coordinates with varying radii and bright fill colors against a pale green background. The code demonstrates the General Update Pattern by joining data to SVG circle elements, setting attributes for position, size, and fill via chained `.attr()` methods. It uses `select` from D3 to handle the container element, measuring its dimensions with `clientWidth` and `clientHeight` to size the responsive SVG, while the `opacity` attribute creates an overlapping effect between the colorful bubbles.

SStephen HC Lin

79% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

79% match

Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

79% match

Loading thumbnail…

D3 3

Fifteen circles oscillate vertically along a sine-like wave, continuously animating across the screen. The visualization is rendered as SVG elements using the D3 library's selection API. It employs `selectAll`, `data`, and `join` to bind incoming data arrays to circle elements, updating their `cx` and `cy` attributes each frame. A JavaScript `setInterval` timer drives the animation at 60 frames per second, computing new y-positions from a tangent function of the current time step.

Rrespingu

78% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

78% match

Loading thumbnail…

Sin circles

Fifteen black circles and their connecting lines animate in a synchronized wave pattern across a white background. Each circle’s vertical position and radius oscillate using sine functions, while lines radiate from the circles to the top-left corner. The animation updates every 130 milliseconds using a `setInterval` loop, with D3’s `select`, `range`, and `rgb` APIs managing SVG elements and data binding.

AAkbarjon

78% match