Circles with Animation

Circle overlap

Ten concentric circles, colored from black through green, blue, yellow, orange, purple, teal, and green to yellow and finally red, are drawn inside an SVG. The circles expand outward in radius from 20 to 200, with their horizontal positions also set to their radius, creating a diagonal stack. The visualization uses d3.select to append a group, scales it by 1.5, and binds the data array via d3’s data join, setting circle attributes for radius, position, fill, stroke, and stroke width.

86% match

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

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

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

transitions

This example animates a set of circles as they move and resize across a wide SVG canvas. Five circles, each driven by values from a static JavaScript array, shift their horizontal, vertical, and radius properties over a four-second duration. The code uses D3's `select()` to append the SVG and builds the animation with the `transition()` API, chaining `.duration()`, `.attr()`, and opacity settings. The circles are rendered as semi-transparent blue shapes, with the initial data divided by a constant factor within the external data module.

Create an animated circle with D3

A circle in an SVG transitions through a sequence of fill colors—red, steelblue, and orange—then shrinks to a radius of zero and expands back to its original size while turning black. The example demonstrates D3 v5's chained transitions, where each `transition()` call queues a new animation stage with specified `duration` and optional `delay`. The circle is appended to the body via `d3.select`, and its position and initial radius are set with SVG attributes, while styling from the page's CSS centers the content.

83% match

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

83% match