morie-sheet

100%

✓ Published0🌍 Public

Last edited Nov 29, 2016

Created on Nov 29, 2016

An animated canvas drawing renders a moiré sheet of 300 horizontal lines whose tilts shift over time, creating a shimmering, organic field. Each line’s angle is gradually averaged with its neighbor, while the top line receives a constant rotational nudge, propagating subtle wave-like motion through the structure. The visualization uses a Canvas 2D context with d3.timer for the animation loop and d3.range to generate the line data.

AI-generated description

Trying to replicate http://bigblueboo.tumblr.com/post/103893207941/moire-shell.

Similar vizzes

Loading thumbnail…

morie-pentagon

This animation reimagines the moiré patterns of a moving flock as a field of rotating, semi-transparent pentagons. Built with SVG and Canvas, it uses D3v4 to interpolate and render concentric, layered polygons whose overlapping edges create pulsing moiré interference patterns. The piece, inspired by an art installation, explores how simple geometric repetition and motion can generate complex visual energy.

11wheel

80% match

Loading thumbnail…

mouseover-moire

This example demonstrates a mouseover-driven moiré pattern, where moving the cursor over the SVG canvas dynamically rotates and rebuilds two layered line grids. The visualization shows how intersecting line families create shifting interference patterns that respond to pointer position. The code uses D3 v3 to append line elements to two separate groups within an SVG, with the mousemove event triggering a function that regenerates both grids and applies a rotation transform based on cursor coordinates. The line count and spacing are controlled by a linear scale, and the grids are drawn from source data derived from the cursor’s vertical position.

11wheel

74% match

Loading thumbnail…

Moiré Patterns

This interactive visualization shows a moiré pattern created by overlapping two sets of concentric circles. The base layer contains 110 circles with increasing radii, while a second set of 60 circles follows the mouse cursor, dynamically scaling their radii based on cursor position. Built with D3.js v3 and rendered as SVG, the pattern uses the `svg.on("mousemove")` event and `d3.mouse` to update circle transforms, producing shifting interference effects as the two circle families intersect.

Mmbostock

72% match

Loading thumbnail…

The Moiré Patterns

Two overlapping sets of vertical bars create animated moiré patterns, with interactive controls for each set adjusting bar count, angle, padding, and color. The visualization uses D3.js to render the bars as SVG rectangles, with a custom `barPattern()` chart function handling the ordinal scaling and transitions between parameter updates. The interface reads user input through D3 selectors attached to HTML form controls, demonstrating dynamic pattern generation through the interference of periodic structures.

JJn1532

70% match

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

69% match

Loading thumbnail…

Mirek - D3

Animated circles move vertically and pulse in size along a horizontal line, creating a wave-like rhythm. The visualization updates at 60 frames per second using a `setInterval` loop that increments a time variable. Each frame, the `prepData` function generates new positions and radii from sine functions, while the `vizData` function renders them as SVG circles via D3's data join. The code uses D3 v6 modules `select`, `range`, and the `.join()` pattern.

MMirekBXL

69% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas piece generates a shifting grid of glowing colored circles that ripple outward in a spiral formation, creating a dynamic, screensaver-like visual effect. The pattern continuously redraws over a semi-transparent black background, leaving faint trails as the positions and radii of the circles evolve over time. Rendering uses the Canvas 2D API with `getContext('2d')` and `requestAnimationFrame` for smooth animation. Each circle’s color, size, and location are computed from sine and cosine functions of grid coordinates and a steadily incrementing time variable, producing a complex, mathematically driven display.

AAndre J Denais

68% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

68% match