Skip to main content
SimilarExport ZIP
100%

Sol LeWitt with D3

✓ Published2🌍 Public
Xxinyuwangxyw
Last edited Mar 20, 2023
Created on Mar 17, 2023

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.

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

Sol LeWitt 5

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars overlaid with two SVG masks. The masks use D3 symbol shapes—such as circles, crosses, and diamonds—cut out in contrasting black-and-white patterns, which create intersecting geometric voids across the striped lines. The rendering is fully vector-based SVG, computed dynamically from 100 data points per axis via `d3.range` and styled through `svg.append("mask")` with `d3.symbol`. The code relies on D3 selections and joins to build the layered composition.

Jjisu9393@naver.com
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…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara
93% match
Loading thumbnail…

SOl Le witt with D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of horizontal and vertical bars that intersect within two circular masks. The SVG rendering uses D3 selections and data joins to generate 100 horizontal rectangles and 100 vertical rectangles, each constrained by a separate mask. The first mask reveals horizontal bars through a white circle on black, while the second uses the inverse, creating a contrasting circular crosshatch pattern. The code leverages D3’s `select`, `append`, and `range` APIs to build the scene dynamically.

Ddexuzi
92% match
Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - non-class

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical bars in an SVG. The bars are masked by two circular masks with inverted fills, creating a crosshatched grid that appears only within the intersecting circular regions. The visualization uses D3's `select`, `append`, `attr`, `data`, `range`, and `join` APIs to build the SVG structure and apply the mask attributes.

KKhanin Sisaengsuwanchai
92% match