Fork of Fork of Sol LeWitt Reproduction with D3

100%

Fork of Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Jan 4, 2023

Created on Jan 4, 2023

Forked from Fork of Sol LeWitt Reproduction with D3

A generative geometric composition mirrors a Sol LeWitt wall drawing, displaying a grid of horizontal and vertical striped rectangles on an SVG canvas. The primary visual effect is a circular white mask that reveals only the horizontal lines within its radius, while the vertical lines remain fully visible across the entire viewport. Built with D3 v6, the code uses `select`, `range`, and `join` to create 100 rectangles per axis, with `window.innerWidth` and `window.innerHeight` defining the responsive full-screen dimensions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction, this piece generates a field of 100 horizontal and 100 vertical rectangles in D3 v3. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to layer the stripes. Two circular masks, one with a black background and white circle, the other with inverted colors, clip the grids to reveal intersecting patterns. The result is a dynamic geometric composition rendered at full screen size.

Bbtlhgboy@icloud.com

94% match

Loading thumbnail…

Fork of Fork of D3 Version Sol LeWitt Reproduction

A generative reproduction of a Sol LeWitt wall drawing fills the browser viewport with two sets of intersecting, striped rectangles. The piece creates a contrast between dense, parallel bands and a central circular region where the pattern shifts orientation. Using D3 v6, the code appends an SVG and employs two mask definitions (`circle-mask`, `circle-mask2`) to selectively hide portions of the vertical and horizontal line groups. It renders 100 rects per group via `selectAll().data().join()`, with each rect sized to cover the full screen.

EEdgar Cortez

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

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.

SSamuele Greco

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin horizontal and vertical rectangles. The horizontal grid is masked to reveal a circular window, while the vertical grid uses an inverted mask, creating a contrasting interplay of lines within and around the central circle. The visualization is rendered as an SVG using D3 v7’s `select`, `range`, and `join` methods, with `mask` elements defining the circular cutouts over a full-screen canvas.

IIgorGorin00

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric composition, showing a grid of horizontal and vertical bars that intersect within a central circular boundary. The piece uses D3 v7 APIs including `select`, `range`, and `join` to generate 100 thin rectangles in each direction, sized to the full viewport. SVG masks (`circle-mask` and `rectangle-mask`) selectively reveal the horizontal lines within a 200-pixel-radius circle, while the vertical lines are inverted so only the outer area appears. The result highlights the interplay between line density and circular cropping, rendered entirely as static SVG elements.

MMofizur Rahman

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

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

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69

92% match