Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
AAaron
Last edited Dec 18, 2025
Created on Dec 18, 2025

This example reproduces a Sol LeWitt wall drawing as a generative SVG artwork. It renders a grid of alternating horizontal and vertical black lines, which are partially revealed through two SVG masks that use large geometric symbols to create the negative space. The code uses D3’s `select`, `range`, `join`, and `symbol` APIs to build the composition, with the `symbol` function generating the mask paths. The result is a dynamic, layered interplay of lines and shapes that fills the browser window.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG. It uses D3's `select`, `range`, and `join` APIs to generate a grid of alternating horizontal and vertical stripes. Two masks, created with `symbol` and `symbols` from D3, overlay the grid: one applies a white-on-black path pattern, the other inverts it, producing a layered geometric composition. The drawing adapts to the browser window's dimensions, with the mask symbols centered and scaled to a fixed size.

VVincent Leduc
94% match
Loading thumbnail…

Full and Final Sol LeWitt Reproduction with D3

This example uses D3.js to recreate a Sol LeWitt-style wall drawing as a generative SVG composition. It displays a grid of alternating horizontal and vertical stripes overlaid with two large geometric symbols—a circular arc and a polygon—that act as masks, cutting their shapes out of the stripe pattern. The implementation leverages D3’s `select`, `range`, `symbol`, and `symbols` APIs to construct the masks and position them along a horizontal line, with the mask fill toggled to create positive and negative space. The entire graphic is built dynamically, sized to the full browser window, and rendered as an SVG document.

Rraturi22@gmail.com
94% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

MMarcus Vinicius da Silveira Richa
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

A full-screen SVG reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical lines, each line of constant width and separated by a fixed interval. D3’s `select`, `range`, `symbols`, and `symbol` APIs generate the line structure, while mask elements, created via the `renderMask` function, define cutout shapes—a circle and other geometric symbols—through which the lines are visible. The masks use fill colors to either hide or reveal lines, producing an inverted visual effect across the composition.

MMofizur Rahman
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

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

Full Sol lewitt reproduction with D3 - exercise

This example reproduces a Sol LeWitt-style wall drawing using D3.js, rendered as an SVG of alternating horizontal and vertical grid lines. Two mask layers, each containing a different geometric symbol from D3’s symbol generator, selectively reveal or hide portions of the grid. The first mask is inverted to expose lines through one set of shapes, while the second uses a complementary fill to display the remaining pattern. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the composition dynamically.

Kkakkanadjoy@yahoo.com
93% match