Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Reproduction with D3

✓ Published0🌍 Public
Jjeevanprasad.shivarathri@zemosolabs.com
Last edited May 8, 2026
Created on May 8, 2026

This example reproduces a Sol Lewitt wall drawing using D3.js. A dense grid of horizontal and vertical rectangles fills the entire viewport, while two SVG masks reveal only a circular intersection of the lines. The first mask shows the horizontal lines within a white circle, and the second mask displays the vertical lines, creating a clean geometric composition. The code uses d3.range to generate 100 line positions and d3 selections with .join to append all SVG rect elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang
95% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
94% match
Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska
94% 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
93% match
Loading thumbnail…

Sol LeWitt Reproduction - D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.8.5 in an SVG rendering. It shows a grid of 100 horizontal and vertical lines, with two circular masks creating a central overlap effect: one mask reveals lines through a black rect and white circle, while the other inverts the pattern. The code imports `select` and `range` from D3 to generate the line data, appends rectangles with calculated positions, and applies masks defined as SVG elements to produce the layered visual.

MMatheesha Yapa
93% match
Loading thumbnail…

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

DDouChinn
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

Aajoua
93% match
Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

DDonald Bagwell
93% match