Skip to main content
SimilarExport ZIP
100%

Sol LeWitt in D3

✓ Published0🌍 Public
DDouChinn
Last edited Apr 6, 2023
Created on Mar 30, 2023
Forked from Landcape

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.

AI-generated description

A reproduction of a Sol Lewitt art piece.

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
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 in d3 v2

This example recreates Sol LeWitt's geometric wall drawings using D3 v5. It creates a grid of intersecting horizontal and vertical rectangles on an SVG canvas. Two SVG masks define a circular window, with one mask inverting the other, revealing the line intersections within the circle. The code uses D3's `select`, `range`, and data join operations to generate the 100 rect elements per axis, with dimensions tied to the browser window.

TTobi Olabode
93% match
Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars that intersect to create a dynamic pattern. The visualization uses two SVG masks—a front mask with a circular cutout and a back mask with an inverted circle—to create a lens effect where the bars appear to change orientation. The code constructs SVG elements programmatically, leveraging D3's `select`, `append`, `attr`, and `range` functions to efficiently build and style the 100 horizontal and vertical rectangles. The rendering is fully vector-based, scaling to the browser window dimensions.

Xxinyuwangxyw
93% match
Loading thumbnail…

Sol LeWitt in d3

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

TTobi Olabode
92% 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
92% match
Loading thumbnail…

Sol LeWitt with D3

A reproduction of a Sol LeWitt wall drawing uses D3 selections to generate an SVG of layered horizontal and vertical bands. The code, using d3.select and svg.attr, builds a full-screen grid of colored rectangles that visually alternate within a circular mask. While several mask and rect creation routines are commented out, the active script sets up the SVG canvas and dimensions to recreate the geometric pattern. The piece relies primarily on D3's DOM manipulation capabilities rather than data binding or scales.

CChloe Ransom
92% 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
92% match