morie-pentagon

100%

morie-pentagon

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Nov 14, 2016

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.

AI-generated description

Trying to replicate http://www.ignant.com/submissions/parratoro-moire-as-energy-beings/ with some help from Gregor.

Similar vizzes

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

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

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

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

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

69% match

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock

69% match

Loading thumbnail…

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

68% match

Loading thumbnail…

Voronoi Spirals II

A Voronoi diagram partitions a canvas into cells around randomly placed sites; this animation continuously warps those cells by rotating each polygon's vertices, creating a swirling, spiraling effect. The fill color shifts through a smooth spectrum as the animation progresses over five seconds. The code uses d3.voronoi to compute the polygons, d3.timer for the animation loop, and d3.scaleCubehelix to interpolate the cell colors. Each frame, the first vertex of a cell is moved toward the next, shortening the polygon's edge before pushing a new point into the array. The rendering is done via the Canvas 2D API.

Mmbostock

68% match