Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt D3

✓ Published0🌍 Public
PParker-D5
Last edited Sep 25, 2023
Created on Sep 25, 2023

Sol LeWitt’s geometric drawing system is recreated as a generative SVG composition using D3. Horizontal and vertical grid lines are drawn across the viewport, each filtered through one of two masks that reveal alternating symbol shapes from `d3.symbol` at fixed intervals. The masks are constructed with `d3.select` and `append`, using `d3.range` to place five distinct symbols, while the grid relies on `selectAll` and `join` with `rect` elements. This implementation adapts the artist’s rule-based aesthetics to a full-screen, code-driven format.

AI-generated description

Following along the demonstration of Sol LeWitt.

MIT Licensed

Similar vizzes

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

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired generative drawing using D3 v7. It displays a grid of alternating horizontal and vertical striped rectangles, with two circular mask overlays that invert the pattern in one region to create a layered visual effect. The code uses `d3.range`, `d3.select`, and `symbol` to build the SVG shapes, applying masks via `<mask>` elements. The artwork is rendered entirely with SVG attributes, using a fixed 100-step loop for each stripe direction and a dynamic viewport-sized canvas.

Wwspwll@gmail.com
90% 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
90% match
Loading thumbnail…

Full Sol LeWitt in d3 v3

This example renders a generative geometric composition using D3 v5, creating a grid of horizontal and vertical rectangles that are masked to reveal two contrasting overlays. The code builds an SVG canvas sized to the browser window, uses `d3.range` to generate 100 rectangles in each direction, and applies `d3.symbol` paths (including a triangle) as masks to selectively show or hide the grid lines. It demonstrates the use of `d3.select` for DOM manipulation and local module imports to organize code.

TTobi Olabode
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