box-edges

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

75% match

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.

72% match

Boxes

This example displays two static circles on an otherwise blank SVG canvas, titled “Living on the edge.” Built with D3 version 7, the code uses the `select` function to access the body element and writes a text string, while the SVG circles are placed using hard-coded `cx`, `cy`, and `r` attributes. No data source is loaded, and no dynamic behavior or interaction occurs; the visualization simply demonstrates a minimal, initial D3 setup with basic SVG shapes.

Bbureauofcreation

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.

random-walk-merge

Hundreds of colored squares perform a synchronized random walk across a canvas, leaving fading trails as they drift. A mouse position controls the minimum square size and the step change magnitude, making the motion more chaotic near the bottom and right edges. The visualization uses `d3.interval` for timed updates and the Canvas 2D API with a semi-transparent white overlay to create a persistent, ghosting effect. Squares periodically merge when they land in the same horizontal position, incrementing a counter that determines their color via `d3.scaleOrdinal`.

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.

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

70% match

Gist f4dd5c4b997e02efe9be

Four animated SVGs show a square deforming as its four corner points move along a continuously shrinking path. Each panel uses a different rule for selecting the next point: constant interpolation, gradually increasing step size, random step length, and a step inversely proportional to the remaining distance. The code relies on `d3.select`, `transition`, and `setInterval`, drawing line segments with `path` elements while updating point positions via the geometric helper functions defined in `geomtry.js`.