Fork of Sol LeWitt Reproduction

100%

Fork of Sol LeWitt Reproduction

✓ Published1🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

TTobi Olabode

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition, generating a grid of overlaid horizontal and vertical stripes that are masked to reveal a central circle. The visualization uses D3 v6 to create an SVG scene, drawing 100 rectangles in each orientation and applying two masks with contrasting black-and-white circular cutouts to shape the final pattern. The rendering fills the entire browser window, with the circle positioned at the center of the viewport.

DDuckGorilla

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles across the full browser window. The visualization appears as a dense crosshatch pattern, with a circular region in the center where the lines are inverted—dark lines show through a light circle, while the surrounding area has light lines on a dark background. The code builds an SVG, creates rect elements with D3’s `range` and `join` methods, and applies two SVG masks with circles to achieve the contrasting effect.

FFerasMorsi

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt art piece using d3 to render horizontal and vertical striped rectangles within a circular mask, creating a geometric pattern that fills the browser window. The SVG output uses two masks—one circular and one inverted—to alternately reveal horizontal or vertical bands across the canvas. Built with d3.select and SVG attributes, the code generates 100 rect elements in each orientation, with the circular mask defined via mask elements and fill colors. The artwork dynamically adapts to the window’s width and height, reflecting LeWitt’s instructional-based aesthetic in a programmatic form.

Iinnocent thomas

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using SVG rect elements generated with d3.selectAll, d3.range, and .join. Horizontal and vertical rectangles are rendered across the full viewport, with two overlapping SVG masks—one showing a white circle on black and the other inverted—creating a circular focal pattern. The code uses D3 v7 selection and data-binding APIs to create 100 rects in each orientation, with the masks revealing and hiding portions of the grid to mimic the geometric interplay of LeWitt’s wall drawings.

Nnim@brejnholt.dk

94% match