Sol LeWitt Reproduction with D3

100%

Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Jul 31, 2026

Created on Jul 24, 2026

A generative reproduction of a Sol LeWitt wall drawing uses D3 selections, data joins, and SVG masks to compose layered striped patterns. The code generates 100 horizontal and vertical rectangles and applies two masks, each containing different D3 symbol shapes, to carve alternating geometric forms across the grid. Masks are constructed programmatically via a reusable `renderMask` function, toggling between inverted and non-inverted fills. The example relies on `d3.range`, `d3.symbols`, `d3.symbol`, and method chaining to build the full composition dynamically based on the viewport size.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of Sol LeWitt’s geometric wall drawings, this example uses D3 to compose a dense grid of horizontal and vertical stripes. Two SVG masks, each populated with a row of distinct symbol shapes, selectively hide or reveal the underlying line work to create layered, patterned intersections. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask paths, with `selection.call` applying the mask logic to the main SVG. The result is an algorithmic reinterpretation of LeWitt’s systematic, rule-based art, rendered entirely as vector graphics.

Xxyzcorrupt@gmail.com

96% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of a Sol LeWitt art piece uses D3 to draw intersecting horizontal and vertical striped bands filtered by two complementary masks. The SVG rendering employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.scaleBand` to place alternating white and black symbol shapes within each mask, creating a woven visual pattern. The masks alternate transparency to combine the striped layers, producing a geometric composition that echoes LeWitt’s systematic wall drawings.

CCurran Kelleher

95% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk

93% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired generative drawing using D3 v7. It displays a grid of alternating horizontal and vertical striped rectangles, with two circular mask overlays that invert the pattern in one region to create a layered visual effect. The code uses `d3.range`, `d3.select`, and `symbol` to build the SVG shapes, applying masks via `<mask>` elements. The artwork is rendered entirely with SVG attributes, using a fixed 100-step loop for each stripe direction and a dynamic viewport-sized canvas.

Wwspwll@gmail.com

93% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher

93% match

Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane01 -exercise

This example reproduces a Sol LeWitt wall drawing as a generative grid of black horizontal and vertical stripes, whose visibility is controlled by mask layers. The SVG rendering uses custom d3 selections and joins to create bands of `rect` elements, while d3’s `symbol` and `symbols` APIs generate the paths used inside the masks. Two mask definitions, created with `renderMask`, alternate filled and empty regions based on symbol parity, producing an interlocking pattern of geometric shapes across the canvas. The composition adapts to the full browser window size.

Gg1g10

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 to generate intersecting horizontal and vertical SVG rectangles. A pair of SVG masks with circular cutouts reveal the lines only within two offset circles, creating an optical moiré pattern across the full viewport. The code uses `d3.select`, `d3.range`, and SVG `mask` elements, rendering 100 stripes in each direction with dimensions tied to `window.innerWidth` and `window.innerHeight`. The result is a precise, generative interpretation of LeWitt’s geometric style, driven entirely by D3’s data join and SVG primitives.

Nnpinta

92% match