D3 Sol LeWitt Reproduction

100%

D3 Sol LeWitt Reproduction

✓ Published0🌍 Public

Last edited Mar 13, 2024

Created on Mar 13, 2024

This D3.js example reproduces a Sol LeWitt wall drawing using generated SVG rects and masks. It creates two circular masks over a grid of horizontal and vertical bars, with one mask inverting the circle to show a ring pattern. The visualization uses native SVG mask elements and the d3 selection API, though the rendering is primarily procedural JavaScript manipulating the DOM. The piece fills the browser window dynamically using window dimensions, generating 100 rects in each orientation.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang

94% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

Aajoua

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

SSalahAnwer-dev

92% match

Loading thumbnail…

D3 Sol LeWitt Reproduction a la class

This example reproduces a Sol LeWitt wall drawing using a grid of horizontal and vertical SVG rectangles that are selectively revealed through two circular masks. The masks invert their fill colors so that one circle exposes horizontal stripes while the other exposes vertical stripes, creating an intersecting cross-hatch pattern. The code uses D3 v6 selection methods like `select` and `range` to generate 100 rectangles in each direction, with SVG `mask` elements defining the circular regions. The visualization fills the entire browser window and renders entirely as vector graphics.

AArnulfotos

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

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

92% match

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

92% match