Reuleaux animated

100%

Reuleaux animated

✓ Published0🌍 Public

Last edited Oct 5, 2018

Created on Oct 5, 2018

This animated visualization demonstrates the classic Reuleaux triangle, a curve of constant width. The figure rotates and moves across the screen, showing its geometric properties. Built using Observable’s notebook runtime and D3.js, the example imports a notebook directly from Observable’s API and renders it into a div. The animation is driven by the notebook’s internal logic, likely involving D3’s transition and interpolation methods. The code specifically loads a pre-existing notebook via a JavaScript URL and uses the `Inspector` and `Runtime` classes to display the output, with CSS fixing the body for a full-viewport presentation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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.

11wheel

67% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

66% match

Loading thumbnail…

Mathematical Graphic Patterns

This example creates an animated, abstract visualization of mathematical graphic patterns. A grid of 900 points is repositioned and resized over time, with each point’s radius and color changing continuously, producing a shimmering, organic composition on a canvas. The animation is built using the Canvas API, with a recursive `requestAnimationFrame` loop driving the updates. The code defines a custom `rgb()` helper and uses trigonometric functions to compute positions and radii, while a faint black overlay creates a fading trail effect. The visualization adapts to the browser window’s dimensions by resizing the canvas dynamically.

CCurran Kelleher

66% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas visualization generates a shifting spiral of colored circles that expands outward in a grid-like pattern. The animation continuously updates using `requestAnimationFrame`, with each circle’s position and radius computed from trigonometric functions of grid coordinates and a slowly advancing time variable. Colors derive from sine-based RGB values, while a semi-transparent black overlay creates a fading trail effect. The code relies solely on the Canvas 2D API, using `getContext('2d')`, `arc`, and `fillRect`, with no external libraries.

RReyden Harris

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

65% match

Loading thumbnail…

Vis. variations on Recamán sequence

This block presents seven animated visual variations of the Recamán sequence, showing paths drawn with different geometric shapes—circles, hexagons, losanges, squares, rounded squares, zed squares, and rounded pluses—derived from the same sequence of numbers. The main path animates via CSS keyframes using stroke-dashoffset, while thumbnails of each shape fade in sequentially and are clickable to switch the main visualization. Built with D3.js v5, the code computes the sequence programmatically and renders SVG paths with CSS animations for the reveal effect.

KKcnarf

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

65% match

Loading thumbnail…

Untitled

This interactive visualization lets users adjust red, green, and blue color channels via separate sliders, altering the displayed output in real time. It builds on an Observable notebook by syedshowmic and uses the Observable Runtime and Inspector APIs to embed the controls. The page’s iframe links to an accompanying video on data wrangling, while the sliders are rendered directly from the embedded module, which does not reveal the underlying canvas or data transformation logic.

Ssyedshowmic

65% match