D3 Sol LeWitt Reproduction

100%

D3 Sol LeWitt Reproduction

✓ Published1🌍 Public

Last edited Aug 10, 2023

Created on Aug 10, 2023

Forked from Final Sol LeWitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using D3 v7. It creates a full-screen SVG and populates it with two sets of 100 thin horizontal and vertical rectangles. Two SVG masks, each containing a central circle, are applied to the respective rectangle groups, making the horizontal lines visible only inside the first circle and the vertical lines visible only inside the second. The `select` and `range` functions from the D3 API are used to construct the SVG elements.

AI-generated description

Reproduction of Sol LeWitt art piece.

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

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher

92% match

Loading thumbnail…

Sol LeWitt Reproduction - D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.8.5 in an SVG rendering. It shows a grid of 100 horizontal and vertical lines, with two circular masks creating a central overlap effect: one mask reveals lines through a black rect and white circle, while the other inverts the pattern. The code imports `select` and `range` from D3 to generate the line data, appends rectangles with calculated positions, and applies masks defined as SVG elements to produce the layered visual.

MMatheesha Yapa

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

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 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 example reproduces a Sol LeWitt art piece as a full-screen SVG. It creates 100 horizontal and 100 vertical bars, each with a fill mask, layering them to form a grid. The masks use a circle to reveal a central disk, with the second mask inverting the effect. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements and masks.

Gguts

92% match

Loading thumbnail…

D3 Sol LeWitt

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It renders a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, covering the full window. Two SVG masks define a central circular aperture: the first mask reveals horizontal stripes inside the circle, while the second reveals vertical stripes outside it, creating a contrasting geometric pattern. The code uses `d3.select`, `d3.range`, and chained `.attr` calls to generate the shapes, with data bounds derived from the window dimensions.

AArturo Guevara

92% match