bw-circles-overlap

100%

bw-circles-overlap

✓ Published0🌍 Public

Last edited Nov 14, 2016

Created on Nov 14, 2016

This example, by 1wheel, shows a swarm of semi-transparent black circles that jostle and overlap on a blank background. Built with D3 v4 and rendered in SVG with canvas animation, the circles appear to be positioned by a force or packing simulation, creating an organic, shifting cluster as they collide and settle. The minimalist monochrome palette keeps the focus on the dynamic layout and the subtle interactions between overlapping shapes.

AI-generated description

From beesandbombs

Similar vizzes

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

78% match

Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda

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

76% match

Loading thumbnail…

no overlap circles one axis

Seven dark circles all start at the vertical center of a small SVG canvas. A custom force function pins each circle’s x-coordinate to the middle of the frame while clamping its y-coordinate within the bounds. The d3.forceSimulation API applies a repulsive `forceManyBody` force, causing the dots to spread vertically into a column. After 100 ticks, a second set of red circles is drawn over the final positions, showing the result with faint overlaps.

PPatrick Wojda

75% match

Loading thumbnail…

practice 1 - Circle overlap cool graphics

This data visualization demonstrates a concentric circle overlap effect, where ten circles of increasing radii and alternating colors are layered to create a "cool graphics" pattern. It shows how varying circle sizes and positions produce an optical illusion of depth and motion. The code uses D3 v5 with an SVG rendering, appending circle elements to a group via \`select\` and \`append\`, setting attributes like \`r\`, \`cx\`, and \`cy\`, and applying a stroke for definition. The circles are drawn in reverse data order to control stacking.

NNita

75% match

Loading thumbnail…

circle-lines

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.

11wheel

75% match

Loading thumbnail…

practice 1 - Circle overlap or opacity check

A circle-overlap visualization arranges ten concentric circles of increasing radius along a diagonal, each filled with a distinct color and outlined in black, to test how opacity reveals underlying shapes. The SVG rendering, created with D3 v5, uses `select` and `append` to add `<circle>` elements from an array of radius and color objects, with the data reversed before binding. The group containing the circles is scaled by 1.5 via a transform attribute, while each circle’s position and size are set directly from its radius value. This example demonstrates basic D3 data joins and SVG attribute manipulation.

NNita

74% match

Loading thumbnail…

Untitled

Three semi-transparent circles overlap on a dark SVG canvas, with brown, steelblue, and green fills at 50% opacity. The circles are positioned so their intersections create blended secondary colors, demonstrating basic transparency and layering effects. The visualization uses D3.js v3 to append SVG circle elements directly to the document body, with fixed pixel coordinates for the center points and radii. The rendering is entirely client-side, with no external data source, and the geometric composition is hardcoded in the script.

YYashasvi Koul

74% match