Fork of Sol LeWitt Reproduction with D3

100%

Fork of Sol LeWitt Reproduction with D3

✓ Published2🌍 Public

Last edited Jul 3, 2024

Created on May 10, 2024

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical striped rectangles, with two SVG masks revealing different symbol shapes at their intersection. The visualization generates 100 thin rectangular bands along each axis, then applies mask-1 and mask-2 to selectively display or hide regions based on d3 symbols. Built with D3 v6, the code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to create the masked effects, rendering entirely in SVG within a full-viewport canvas.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition by layering horizontal and vertical stripes with D3 SVG masks. It generates 120 evenly spaced bands across the viewport, then applies two complementary masks that alternate between black and white columns containing D3’s built-in symbol shapes (circles, crosses, diamonds, and more). The masks flip the symbol fill and stripe polarity inversely, creating an overlapping optical pattern. The code uses `d3.range`, `d3.scaleBand`, `d3.symbol`, and `d3.symbols` to structure the stripes and mask geometry.

AAprilF

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical bands. It generates 100 rectangles in each direction, with alternating masks that reveal or hide symbol-shaped cutouts across the canvas. The visualization uses D3 v6 to create SVG elements and mask patterns, employing `d3.range` for data generation and `d3.symbol` for the path shapes. Each mask applies a contrasting fill to selectively display the symbols, creating a layered optical effect. The rendering is fully SVG-based and responds to the window size.

TTowlGol

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3 - reference

This example reproduces a Sol LeWitt art piece using D3 v6. It renders two sets of translucent black-and-white striped rectangles overlaid with masks, creating a grid of alternating symbols. The code uses `d3.select`, `d3.range`, `d3.symbol`, `d3.symbols`, `d3.scaleBand`, and SVG masks. Each mask layers vertically and horizontally offset rectangles with D3 symbol paths, alternating white and black fills to generate overlapping geometric patterns. The page fills the browser window with 120 stripes per axis, using inlined SVG without external data.

FFelicity Wu

93% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical stripes. Two sets of SVG rectangles are drawn across the full width and height of the viewport, each filtered through a separate SVG mask. The masks reveal or hide portions of the stripes using a row of D3 symbol shapes (from `d3.symbol`), with one mask inverted. The visualization uses D3 v6 selections, `range`, and `join` to generate the elements, and renders entirely as SVG in the browser.

CCurran Kelleher

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate geometric patterns of horizontal and vertical bands. It employs `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to create SVG rectangles and symbols within two masks, alternating their fills to produce an interlocking striped composition. The code uses an SVG renderer with `window.innerWidth` and `window.innerHeight` for full-screen display. While mask creation functions are defined for both layers, only the initial band structures are rendered in the current setup.

Aaalyousfi

93% match

Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Mmkarnam.mahendra@gmail.com

93% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping sets of thin horizontal and vertical rectangles. The drawing applies two distinct SVG masks to each set, creating a crosshatched grid that visually inverts where the shapes intersect. Built with D3 v6, it generates 100 rectangles per axis using `range` and `selectAll().join()`, while the `symbol` API draws a diamond-shaped mask path. The final SVG adapts to the full browser window size, with masks rendered through appended `<mask>` elements.

DDuckGorilla

93% match