Spiral Triangle II

100%

Spiral Triangle II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 17, 2015

Three rotating triangles made of small squares converge in the center, with each square cycling through a smooth cubehelix color palette. The animation uses multiple `d3.timer` callbacks to update square positions and rotations, while `d3.scale.cubehelix` maps time-based domain values to color. Sixty squares per triangle move horizontally and spin at a constant angular speed, clipped to two regions that divide the SVG canvas. The code relies on D3 v3 selection methods and SVG transforms to coordinate the layered motion.

AI-generated description

A colorized version of my recreation of an untitled GIF by PATAKK.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Spiral Triangle III

A grid of 71 small cross-shaped symbols rotates in a spiral pattern around a triangle, with colors shifting through a cubehelix scale. The animation is clipped into upper and lower regions of the SVG canvas, and each symbol moves outward while rotating at a constant angular speed. The code uses D3 v3's `d3.timer` for animation, `d3.svg.symbol` for cross paths, and a custom `d3.scale.cubehelix` with three HSL stops to interpolate fill colors over time.

Mmbostock

90% match

Loading thumbnail…

Spiral Triangle

A mesmerizing, topologically impossible animation shows a spiral of black-stroked white squares rotating and translating within two triangular clipping regions. The piece recreates a GIF by PATAKK, using an SVG scene with upper and lower clip paths. The code uses d3.v3’s `d3.selectAll`, `d3.range`, and `d3.timer` to drive square transforms, while each square’s position and rotation are computed from a normalized index and elapsed time.

Mmbostock

88% match

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Mmbostock

84% match

Loading thumbnail…

Square Circle Spiral Illusion

Six concentric rings of small squares rotate at different speeds via SVG transforms, creating a spiral-like square illusion against a gray background. Alternate squares are stroked white for contrast. The animation uses `d3.timer` and `d3.selectAll` with `attr("transform")` to update rotation based on elapsed time, while each ring’s squares are generated from `d3.range` and positioned with `translate` and `rotate`. The code runs on D3 v3 and relies on SVG `rect` elements.

Mmbostock

83% match

Loading thumbnail…

Trembling triangle #2

An animated triangle on a canvas trembles and morphs as it fills with shifting, warm-colored bands. The rendering uses a D3 v4 timer loop to drive the shape’s jitter, with the triangle’s edges recursively subdivided to create fractal depth. Each frame, the canvas is cleared, and ten offset triangle paths are drawn in sequence with semi-transparent fills, producing a shimmering, layered effect. The code employs `d3.randomNormal`, `d3.scaleLinear`, `d3.interpolateWarm`, and the Canvas 2D API to generate the motion and color.

EEndNight95

78% match

Loading thumbnail…

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

EEndNight95

77% match

Loading thumbnail…

Triangle Rotate

A triangle rotates in place against a backdrop of horizontal gridlines, using a looping animation to create a continuous spinning effect. The visualization is built with D3 v5 and SVG, leveraging D3 transitions and the `transition.attr` method to apply incremental rotations to a group element. Static horizontal lines and a red reference point highlight the triangle's pivot, while the code structure separates translation and rotation groups for clarity. The animation runs indefinitely by recursively calling the animate function upon transition completion.

CChristoph Diefenthal

77% match

Loading thumbnail…

Voronoi Spirals II

A Voronoi diagram partitions a canvas into cells around randomly placed sites; this animation continuously warps those cells by rotating each polygon's vertices, creating a swirling, spiraling effect. The fill color shifts through a smooth spectrum as the animation progresses over five seconds. The code uses d3.voronoi to compute the polygons, d3.timer for the animation loop, and d3.scaleCubehelix to interpolate the cell colors. Each frame, the first vertex of a cell is moved toward the next, shortening the polygon's edge before pushing a new point into the array. The rendering is done via the Canvas 2D API.

Mmbostock

75% match