100%

The Moiré Patterns

✓ Published0🌍 Public

Last edited Sep 16, 2014

Created on May 4, 2016

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.

AI-generated description

Moiré Patterns

Moiré Patterns are patterns that results from overlapping two periodical patterns (series of straight lines, for instance). This demo allows to create Moiré patterns by changing the relative angle between the patterns, the number of bars, the bar width and the color of the bars.

Moiré Patterns

This demo uses D3 to create the patterns with SVG rectangles.

References

Similar vizzes

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

83% match

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

EErik Sundahl

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

72% match

Loading thumbnail…

Radial Moiré

A radial Moiré pattern emerges from alternating black and white arcs generated with d3.arc and d3.pie, rendered as SVG paths within a React component. The 3,000 data points are mapped to equal-value pie slices, creating concentric bands whose interference produces the glitchy visual effect. Because rendering relies on SVG, the result reveals quirks in how the SVG engine handles overlapping shapes at scale.

CCurran Kelleher

72% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

71% match

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

70% match

Loading thumbnail…

morie-sheet

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.

11wheel

70% match

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Ssubratanp

70% match