Sol LeWitt Reproduction with D3

100%

Sol LeWitt Reproduction with D3

✓ Published75🌍 Public

Last edited Jan 4, 2024

Created on Mar 27, 2021

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It renders a grid of alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

PPetrescu Alexandru

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

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

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

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

94% match

Loading thumbnail…

Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt drawing using D3 and SVG renderings. Two sets of 100 thin rectangles are drawn—one horizontal and one vertical—creating a grid-like pattern. Each set of rectangles is masked by a circular region: the horizontal bars use a mask with a central white circle on black, while the vertical bars use an inverse mask with a black circle on white. The result shows a grid within a circular window, with the horizontal and vertical lines swapping visibility inside and outside the circle. The code uses `d3.select`, `d3.range`, `svg.append`, and `.join()` to build the SVG elements and masks programmatically.

Yyankesswang

94% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy

93% match