Skip to main content
SimilarExport ZIP
100%

Rota2

✓ Published0🌍 Public
AArturo Guevara
Last edited Sep 2, 2022
Created on Sep 2, 2022
Forked from Hello HTML

A black circular canvas contains eight white lines radiating from the center, dividing the circle into sixteen equal sectors. A single rotating group, animated with SVG `<animateTransform>`, spins one set of eight white dots around the center while counter-rotating on its own axis. The dots trace paths determined by the combination of these two rotations, creating a dynamic, hypnotic pattern. The entire composition is rendered in static SVG with inline animation declarations.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

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
79% match
Loading thumbnail…

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
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
73% match
Loading thumbnail…

wheels on wheels on wheels

This interactive visualization animates layered rotating wheels, tracing complex rosette patterns onto a black canvas. Each wheel’s radius, rotation direction, and phasing can be adjusted via the dat.GUI controller, while a random mode continuously generates new designs. The SVG paths, stroked in white with the third wheel’s position marked in red, update in real time. Built with D3.js for rendering and dat.GUI for controls, it explores cyclic motion and symmetry, allowing users to stop randomization and fine-tune parameters to see the pattern evolve dynamically.

KKcnarf
73% match
Loading thumbnail…

Sin circles

Fifteen black circles and their connecting lines animate in a synchronized wave pattern across a white background. Each circle’s vertical position and radius oscillate using sine functions, while lines radiate from the circles to the top-left corner. The animation updates every 130 milliseconds using a `setInterval` loop, with D3’s `select`, `range`, and `rgb` APIs managing SVG elements and data binding.

AAkbarjon
73% 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
72% 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
72% match
Loading thumbnail…

make_something_dataviz

This visualization shows an abstract, sun-like composition built from a central circle with radiating triangular spokes, each accompanied by a quadratic curve and an animated rectangle. The center uses a radial gradient, while the spokes use a linear gradient; the squares cycle through the palette colors. The piece is rendered as SVG, and the JavaScript `circleCopy` function duplicates the initial group of shapes, rotating it eight times around the circle’s center to form the full pattern.

DDaniel Ribaudo
71% match