Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Full Working with D3 Full Alternate

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Full Working with D3 Full

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.

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

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com
90% 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
90% match
Loading thumbnail…

Full Sol Levitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical bars that are partially masked to create an interplay of solid and negative space. The visualization fills the entire browser window, with each bar’s position and thickness calculated from the window dimensions. The code employs D3’s `select`, `range`, and `symbol` APIs to generate SVG shapes and masks. Two `mask` elements, one inverted, apply a large circular path as a cutout, alternating which set of lines is visible through the circle, demonstrating core SVG masking techniques within a generative art context.

SSimon Krukowski
90% match