Skip to main content
SimilarExport ZIP
100%

Final Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Rraturi22@gmail.com
Last edited Aug 7, 2025
Created on Aug 7, 2025

A grid of alternating horizontal and vertical black-and-white rectangles becomes visible through two SVG masks, revealing a pattern of D3 symbol shapes rendered with `d3.symbol` and `d3.symbols`. The example uses `d3.select`, `d3.range`, and `d3.symbol` to generate the rectangles and mask paths, with the mask elements created programmatically and applied via the `mask` attribute. The output is a static SVG visualization, drawn across the full browser window, that demonstrates layered masking and the use of selection joins with `join`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Final Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js to generate layered striped patterns across the full browser window. It shows how SVG masks with geometric symbols create intersecting horizontal and vertical line grids with dynamic cutout effects. The code uses D3’s `select`, `range`, and `symbol` APIs to render 100 rectangles per axis, applying two masks with inverted fills to produce the final composition. The visualization highlights algorithmic art generation through SVG rendering and mask manipulation.

AAndre J Denais
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical striped rectangles across the full browser viewport. Two complementary masks, generated from a large D3 symbol path, create the geometric interplay by alternating which stripes are visible in each region. The SVG output is built by chaining D3 selection methods like `select`, `append`, and `join` to generate the rect elements, while `renderMask` applies the symbol-based masks to the grid. The result is a generative, code-driven art piece that adapts to the window size.

Rraturi22@gmail.com
89% 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
89% 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
88% match
Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mmaciekawsq@gmail.com
87% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

SSami Friedrich
87% 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
87% match