Sol Lewitt - D3

100%

Sol Lewitt - D3

✓ Published1🌍 Public

Last edited Dec 17, 2024

Created on Dec 11, 2024

A grid of thin horizontal and vertical white strokes overlays the full browser window, but a circular mask reveals the pattern only within a central disc, creating a crisp boundary between the visible striped interior and a blank exterior. Built with D3.js (version 7.9.0) and rendered as SVG, the code uses `select`, `range`, and the `.join('rect')` API to generate 100 rects in each orientation. Two SVG masks—one with a white circle on black, the other inverted—alternately hide and reveal the respective stroke sets, producing the final composed image.

AI-generated description

Trying to reproduce Sol Lewitt art in D3.

To know which version is the latest D3, go to Unpkg.com - when produced, latest version was D3.7.9

package.json --> used to pull in D3.js latest version

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Ppirani.sabah@gmail.com

91% match

Loading thumbnail…

Sol Lewitt (D3)

Two overlapping grids of thin horizontal and vertical rectangles render on an SVG canvas, creating a crosshatched composition. Masking reveals the pattern only within two circular regions: one section shows horizontal lines, while the other displays vertical lines. Built with vanilla JavaScript and D3 v6, the code uses `select`, `range`, and `join` to generate 100 rectangles per axis, with SVG `mask` elements defining the circular cutouts.

WWaseem Medhat

90% match

Loading thumbnail…

Sol Lewitt Variant with D3

This example reproduces Sol Lewitt’s geometric wall drawing as an interactive SVG visualization. It displays a grid of alternating horizontal and vertical stripes, masked into two overlapping circular windows at the center of the canvas. Using D3 selections and data joins, the code generates 100 rectangles in each direction via `range(n)`. Two SVG masks with complementary black-and-white circles control which stripes appear inside each circle, creating a layered optical effect.

Iibaird6@gatech.edu

89% match

Loading thumbnail…

Sol_LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The stripes are masked by two overlapping circles, creating a circular intersection pattern that reveals and hides parts of the grid. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to define the visual effect. The artwork scales to the browser window, with masks controlling which stripes remain visible, echoing LeWitt’s geometric, systematic style.

Ffcordon@pin.upv.es

89% match

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js reproduction of a Sol LeWitt piece covers the viewport with two sets of striped rectangles—horizontal bands and vertical bands—that intersect at a central circular area. The rendering uses SVG masks (`circle-mask` and `rect-mask`) to selectively reveal or hide stripes, creating the illusion of a circular window through the grid. The code draws 100 rects in each orientation, layering them with opposite mask fills to alternate visibility. This generative artwork leverages D3's `select`, `range`, and `join` API to build the SVG structure dynamically, scaling to the full window size.

DDilara Bozkurt

89% match

Loading thumbnail…

Sol Lewitt with D3 Project (from Scratch)

This example recreates Sol LeWitt’s geometric wall drawings using D3.js, rendering a dense grid of thin vertical and horizontal lines across the full browser window. Two opposing masks, each containing five distinct symbols from D3’s `symbol` API, selectively hide or expose portions of the line grid, creating overlapping, patterned regions. The visualization uses `d3.select`, `range`, and `join` to generate 120 rectangles in each orientation, with SVG masks applied via `mask.append` and `attr('mask', ...)`. The result is a digital homage that blends generative code with minimalist art.

CCasualWanderer20XX

89% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 -pr

A grid of thin horizontal and vertical bands fills the browser window, but a circular mask reveals only the central intersection of the two patterns. The piece reproduces a Sol LeWitt wall drawing. Created with D3.js (v6.6.1) using `select`, `range`, and `.join` to build SVG `rect` elements, it applies two SVG masks—one with a black background and white circle, the other inverted—to cut the stripes into a disc-like view at the center of the canvas.

NNaveen Pratiksha

89% match