Spiral Triangle III

100%

Spiral Triangle III

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 17, 2015

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.

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 II

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.

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

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

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

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

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

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

75% match

Loading thumbnail…

rect-spiral

An animated grid of squares repeatedly collapses to points and expands into colored rectangles against a dark background. Each cycle, a new set of squares appears, and the staggered delays create a cascading effect as they grow to full size. The code uses D3.js, lodash, and custom d3-starterkit helpers, appending `rect` elements to an SVG and animating their `width`, `height`, `x`, and `y` attributes via `transition()`. The grid positions are derived from dividing the viewport into a matrix, and each square’s fill color is randomly generated.

11wheel

74% match