Moiré Patterns

100%

Moiré Patterns

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Nov 24, 2010

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.

AI-generated description

Interactive Moiré pattern implemented in D3. Inspired by Max Ogden.

gpl-3.0 Licensed

Similar vizzes

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

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

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

75% match

Loading thumbnail…

Circles with D3

This example displays seven colored circles, each with distinct positions, radii, and fill colors, laid out on a light green background. The visualization uses the D3.js library within a data-driven approach, binding circle elements to an array of data objects. It demonstrates D3's method chaining and data join pattern, where the `select`, `selectAll`, `data`, and `join` methods manage the SVG creation and attribute updates, including `cx`, `cy`, `r`, and `fill`.

MMorris Muriithi

74% match

Loading thumbnail…

practice 1 - Circle overlap cool graphics

This data visualization demonstrates a concentric circle overlap effect, where ten circles of increasing radii and alternating colors are layered to create a "cool graphics" pattern. It shows how varying circle sizes and positions produce an optical illusion of depth and motion. The code uses D3 v5 with an SVG rendering, appending circle elements to a group via \`select\` and \`append\`, setting attributes like \`r\`, \`cx\`, and \`cy\`, and applying a stroke for definition. The circles are drawn in reverse data order to control stacking.

NNita

73% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

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

73% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

73% match