Sol LeWitt Reproduction with d3

100%

Sol LeWitt Reproduction with d3

✓ Published1🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

This example reproduces the visual style of Sol LeWitt’s geometric wall drawings. It renders a grid of alternating horizontal and vertical stripes across the full browser window, with each stripe group masked by a different SVG mask. D3 v6 is used to generate the SVG elements, while `d3.symbol` and `d3.symbols` draw the mask shapes—a series of distinct symbols, such as circles and crosses—that selectively reveal or hide the stripes. The masks invert their fill to create contrasting cutout effects across the composition.

AI-generated description

Sol LeWitt Arts reproduction

MIT Licensed

Similar vizzes

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…

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

WWolfgang

93% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This reproduction of a Sol LeWitt wall drawing uses D3.js version 7.8.5 to render layered horizontal and vertical stripes across the full browser window. The SVG output applies two distinct masks to each set of stripes, with each mask containing a row of geometric symbols generated via `d3.symbols` and `d3.symbol`. The inverted mask (white background with black symbols) and non-inverted mask (black background with white symbols) create the contrasting visual interplay characteristic of LeWitt's systematic instructions.

Nnim@brejnholt.dk

92% match

Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

Ttverdone

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais

92% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97

92% match

Loading thumbnail…

Full Sol LeWitt kind of reproduction with D3

This example uses D3 to generate a full-screen SVG reproduction of a Sol LeWitt–style geometric drawing. It renders two alternating sets of vertical and horizontal stripes, each partially masked by rows of D3’s built-in symbol shapes (including circles, crosses, and diamonds). The code leverages `d3.range`, `d3.symbol`, and SVG `<mask>` elements to create the overlapping optical effect, with the masks alternating between inverted and normal fill modes. All drawing is done in the browser using D3 v6 and SVG.

VValentine Solonechnyi

92% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - exercises

This example reproduces a Sol LeWitt artwork using D3.js, rendering an SVG canvas that fills the browser window. It shows a grid of alternating horizontal and vertical stripes, with the stripes revealed through two distinct mask layers. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to draw the geometric patterns and mask paths. The masks, created via the `renderMask` function, use inverted black-and-white fills and paths from `symbols` to selectively hide or show the stripes, producing the final composition.

IIan Mac Moore

91% match