Full Sol LeWitt reproduction with D3

100%

Full Sol LeWitt reproduction with D3

✓ Published0🌍 Public

Last edited Sep 2, 2023

Created on Sep 2, 2023

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

AI-generated description

Learning

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru

94% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

PPetrescu Alexandru

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It renders a grid of alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

PPetrescu Alexandru

93% match

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber

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

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

93% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, masked to reveal a white diamond shape at the center and a black circle behind it. The visualization is rendered as an SVG using D3 v7, leveraging `select`, `range`, `join`, and `symbol` APIs to generate the grid of lines. Two masks (`circle-mask` and `circle-mask2`) combine the shapes, with the horizontal bars visible through the diamond and vertical bars elsewhere. The code imports from `d3` and appends elements to the body, adapting to the full window size.

Lliu yang

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is partially visible through two circular masks, creating a layered crosshatch pattern reminiscent of Sol LeWitt's geometric wall drawings. The example uses D3 selections with `selectAll` and `join` to bind data from `d3.range` to SVG `rect` elements, rendered directly as SVG. Two SVG `mask` elements define the circular cutouts: one inverts the grid by showing only the intersection of shapes, while the other reveals the full pattern. The code dynamically sizes the visualization to the full browser window.

Ppawelsapiecha

92% match