Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
Nnpinta
Last edited Oct 22, 2022
Created on Oct 22, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
96% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Ccardoza-IPH
96% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li
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
95% 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
94% 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
94% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Uulrichzhan
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas
94% match