Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Full Working with D3 Full

✓ Published1🌍 Public
Aalexis.delacotte@gmail.com
Last edited Apr 8, 2026
Created on Apr 8, 2026

This example generates an abstract geometric composition inspired by Sol LeWitt, combining a grid of horizontal and vertical rectangles with dynamic masking. Two SVG masks, created via D3’s `svg.call()` and the `renderMask` function, selectively reveal or hide the grid lines using distinct symbols from `d3.symbol()` and `d3.symbols`. Each mask positions these symbols across the canvas, with inverted fill patterns controlling which areas of the underlying grid become visible. The result is a layered interplay of lines and shapes that shifts based on symbol placement and mask inversion.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Full Working with D3 Full Alternate

This example creates an abstract grid of horizontal and vertical black bars, generated using D3.js. The composition is layered with two SVG masks that apply geometric and symbol-based cutouts, revealing alternating patterns. The code uses D3’s `range`, `selectAll`, and `join` methods to efficiently build the grid, while `symbol` and `symbols` generate the mask paths. The result is a dynamic, self-contained visual piece that plays with positive and negative space, rendered entirely in SVG.

Aalexis.delacotte@gmail.com
93% 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
93% match
Loading thumbnail…

Sol LeWitt Full Working with D3

This example encodes a minimalist grid in the style of Sol LeWitt, using a 50 × 50 set of horizontal and vertical rectangles. The rectangles are masked by two overlapping circular threshold patterns, effectively revealing a cross-hatched composition that changes with the mask geometry. The implementation uses D3’s `select`, `range`, and `symbol` APIs to build SVG elements and path masks, with the `symbol` function generating a large circular clip path via `symbols[1]`. The rendered output is entirely vector-based, with masks defined through SVG `mask` elements and applied to both sets of rectangles.

Aalexis.delacotte@gmail.com
93% 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
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
91% match
Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

AAngela Kochoska
91% 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
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

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.

AAaron
91% match