Sol LeWitt Reproduction (D3 groups)

100%

Sol LeWitt Reproduction (D3 groups)

✓ Published0🌍 Public

Last edited Jan 18, 2023

Created on Jan 18, 2023

This example reproduces a Sol LeWitt art piece using D3 groups to draw two sets of overlapping stripes. One group renders 100 horizontal rectangles, and another draws 100 vertical rectangles, each set filtered through a circular mask. The code uses `select`, `append`, and `join` from D3's API, with the masks defined via `svg.append('mask')` and styled using `rect` and `circle` elements. The artwork dynamically fills the browser window, showcasing a grid-and-circle motif.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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 (with SVG Groups)

This is a D3.js reproduction of a Sol LeWitt art piece, rendered in SVG. The visualization shows a grid of horizontal and vertical striped rectangles overlaid on the full viewport. Two SVG masks create a central circular cutout: one mask reveals a circle in the upper layer, while the other uses inverted colors to hide the circle in the lower layer, producing a contrasting visual effect. The code uses d3.select, d3.range, and attribute chaining to generate 100 rectangles in each direction, with dimensions tied to the window size.

Nnim@brejnholt.dk

93% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using D3.js to generate a grid of horizontal and vertical striped rectangles. The rendering uses SVG masks to create two overlapping circular cutouts, with horizontal lines visible in one circle and vertical lines in the other. The code builds the visualization with D3 selections, `range`, and mask elements, sizing it to the full browser window.

LLohitB

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

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt art piece generates two sets of horizontal and vertical stripes across the viewport, masked to create two circular cutouts in the center. Using `d3.select`, `d3.range`, and the `.join('rect')` API, it renders 100 rectangles in each direction, with SVG masks (`circle-mask` and `circle-mask-2`) alternating black and white fill to reveal the layered stripe pattern. The piece is simple, deterministic, and scales to the full browser window.

DDuckGorilla

91% match

Loading thumbnail…

group element D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing with layered horizontal and vertical stripes overlaid on a full-window SVG canvas. The piece shows a grid of thin, alternately oriented lines that are masked to reveal a central circular cutout, with the vertical and horizontal bands intersecting to create a woven pattern. Built using D3 v7, it employs `select().append()`, `range()`, and the `join()` operator to generate 100 rects in each group, while two SVG `<mask>` elements define the circular reveal and concealment for the line sets.

Mmegan-grannan

91% match

Loading thumbnail…

Sol LeWitt Reproduction with d3

This example reproduces a Sol LeWitt art piece using d3.js. It displays a grid of horizontal and vertical black and red stripes, which are masked to create a circular viewing area in the center. The vertical stripe group is rotated 20 degrees around the center. The code uses d3 `select`, `range`, and `join` operations to generate SVG `rect` elements, and defines two SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. Hovering changes stripe colors.

Bbjfmbeck

91% match