Sol LeWitt Repro w/ D3 - different method

100%

Sol LeWitt Repro w/ D3 - different method

✓ Published0🌍 Public

Last edited Feb 12, 2023

Created on Feb 12, 2023

This example reproduces a Sol LeWitt-inspired wall drawing by filling the screen with horizontal and vertical striped rectangles. It creates 100 rows and 100 columns, each 10 pixels thick, and layers them using two SVG masks to reveal a circular cutout where the orientations intersect. The visualization uses D3 v7’s `select`, `range`, and `join` to append SVG elements, while separate mask definitions with black and white fills control visibility. Rendering is fully SVG-based, with window dimensions driving the canvas size.

AI-generated description

Combined element creation (.append) w/ adding to DOM Also using classes to separate mask ('rect') elements

MIT Licensed

Similar vizzes

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

94% 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

92% match

Loading thumbnail…

Sol LeWitt reproduction with D3 method 2

This visualization reproduces a Sol LeWitt wall drawing using two sets of alternating horizontal and vertical striped rectangles, with circular masks applied to create a cross-like pattern at the center. The SVG rendering uses D3 v7’s `select`, `range`, and data joins to generate 100 rects in each group, while custom `mask` elements with black and white fills define the visibility of the overlapping grid.

LLouis Astorg

92% 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

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…

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

92% 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

92% match

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js (v7) reproduction of Sol LeWitt’s Wall Drawing #370 uses SVG masks to create a circular viewing window. The code generates 100 horizontal and 100 vertical striped rectangles across the full canvas, with each set masked to reveal either a white circle on black or a black circle on white. The two masks are defined as `mask` and `mask2`, each containing a full-canvas rect and a 200-pixel-radius circle positioned at the center. The `select` and `range` APIs are used to construct the repeating rect elements via joins.

LLouis Astorg

91% match