Sol LeWitt Full Working with D3

100%

Sol LeWitt Full Working with D3

✓ Published1🌍 Public

Last edited Apr 8, 2026

Created on Apr 8, 2026

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.

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…

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

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…

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

90% match

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber

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

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