Sol LeWitt Reproduction with D3 and groups

100%

Sol LeWitt Reproduction with D3 and groups

✓ Published0🌍 Public

Last edited Sep 1, 2023

Created on Sep 1, 2023

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.

AI-generated description

Learning

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru

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

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

PPetrescu Alexandru

93% match

Loading thumbnail…

Sol LeWitt Reproduction (D3 groups)

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.

LLohitB

93% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering two sets of horizontal and vertical striped rectangles that intersect within circular masks on an SVG canvas. The code generates 100 of each rectangle type, with the first mask revealing a solid circle and the second inverting the pattern, creating a layered geometric contrast. It uses D3’s `select` and `range` functions from version 6.6.1 to build the SVG dynamically, positioning elements based on window dimensions.

Aainhoadieruiz@gmail.com

93% match

Loading thumbnail…

Sol LeWitt Reproduction - D3 (2)

This example reproduces a Sol LeWitt drawing using D3 version 7. It overlays two sets of striped rectangles—one horizontal and one vertical—each limited to a circular region through SVG mask elements. The horizontal stripes are masked by a circle in a black rectangle, while the vertical stripes use an inverted mask with a black circle on white. The visualization fills the entire browser window, with stripes spaced at 20-pixel intervals. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to achieve the geometric composition.

MMatheesha Yapa

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Ttriciascully

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

92% match