Sol LeWitt 5

100%

✓ Published0🌍 Public

Last edited Dec 20, 2024

Created on Dec 20, 2024

Forked from Fork of Fork of Fork of Sol LeWitt 4

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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 SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

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

92% match

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

92% match

Loading thumbnail…

Sol lewitt in d3 after consolidation

This example reproduces Sol LeWitt’s geometric wall drawings using D3.js with an SVG rendering. It draws a grid of black horizontal and vertical rectangles, then applies two masks—one normal and one inverted—to selectively reveal or hide parts of the lines. The masks use d3.symbol and d3.symbols to create white or black shape cutouts positioned across the canvas. The code relies on d3.select, d3.range, and d3.join to bind data and construct the SVG elements dynamically.

Mmarc.chatton@outlook.com

92% 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…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 v7, rendering a grid of intersecting rectangles with SVG masks. It shows alternating striped patterns: one set of horizontal and vertical bands is masked by a black diamond symbol, while the other is masked by an inverted version. The code uses `selection.join`, `range`, and `symbol` with `symbols[1]` to generate paths, applying masks via `svg.append('mask')` and `attr('mask', ...)`. The visualization is data-free, instead deriving geometry from the browser’s window dimensions, and outputs pure vector shapes.

DDilara Bozkurt

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

91% match