Circle Aliasing

Circle animation

Eight red circles traverse a static outline of a larger circle drawn in SVG. The circles move along straight lines, following different diagonal and vertical paths at staggered start times, creating a repeated cycle. The animation uses SVG's `animateMotion` element with an 8-second duration and indefinite repeat. The white background and hard-light blend mode on the enclosing group provide the visual effect. The page is a minimal HTML document with embedded SVG markup.

AArturo Guevara

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

75% match

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

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.

circle-stroke

A small cluster of circles illustrates an inverse relationship between stroke width and radius. Each circle’s red outline is drawn with a stroke width proportional to 1/r, so smaller circles have thicker strokes and larger circles thinner ones, while all strokes contain roughly the same number of red pixels. The composition is generated with D3.js, using SVG `circle` elements and inline `strokeWidth` bindings, with positions placed on a central layout. The code also uses lodash (via `d3_.js`) to handle array transformations, and the visualization is rendered as an animated SVG scene.

Circle

This example displays a static SVG scene containing four filled circles arranged in a grid, alongside two hand-drawn paths with black strokes and no fill. The circles are positioned using explicit `cx` and `cy` attributes, while the paths are defined with `M` and `L` commands. Rendered inline in the HTML, the visualization relies solely on native SVG elements—such as `circle` and `path`—without any JavaScript libraries or animation logic, serving as a minimal sandbox for exploring basic shape placement and coordinate systems.

Ddeebanks77

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.

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10