Curlies

100%

✓ Published0🌍 Public

Last edited Oct 20, 2017

Created on Oct 20, 2017

The visualization displays a dense grid of 2,500 small, convex blob shapes, each rotating and scaling independently against a brown stroke on a canvas. As the animation progresses, the entire grid expands uniformly from a scale of 1 to 2.5, with each blob’s rotation speed varying randomly. The code uses `d3.range` to generate the grid, `d3.polygonHull` to create each blob from random points, and `d3.line` with `d3.curveCatmullRomClosed` for smooth outlines. Rendering relies on the Canvas 2D context, driven by a `d3.timer` loop that applies translation, rotation, and scaling transformations.

AI-generated description

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/9e63b6bb361993436f82c0bb85006330'>Curlies</a>

Similar vizzes

Loading thumbnail…

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.

11wheel

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

72% match

Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau

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

70% match

Loading thumbnail…

random-simple-poly-circle

This visualization shows a grid of 24 simple polygons, each constructed from 100 random points. Every polygon is composed of semi-transparent circles and a connecting path, creating a varied, organic geometric pattern across the canvas. The code uses D3.js, specifically `d3.scale`, `d3.select`, and `dataAppend`, along with a custom `randPoly` function. The polygons are positioned via SVG `g` elements and translated using a `translate` method, with points rendered as circles with a radius of 1.5. Rendering is done through SVG paths and elements in HTML.

11wheel

70% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

70% match

Loading thumbnail…

Animate thousands of points with canvas and D3

This example shows 7,000 points smoothly animating through a repeating sequence of five layouts: sine wave, phyllotaxis spiral, spiral, phyllotaxis, and grid. The animation updates point positions by interpolating between source and target coordinates over 1.5 seconds using `d3.timer` and an easing function. Instead of SVG, it draws each point as a filled rectangle on an HTML5 Canvas via `getContext('2d')`, allowing for thousands of elements without performance degradation. Point colors are assigned using `d3.interpolateViridis`.

TThanaporn-sk

69% match

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur

69% match