Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3 - inesh

✓ Published0🌍 Public
Iineshp2020@gmail.com
Last edited Sep 24, 2024
Created on Sep 16, 2024

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering the artwork entirely with SVG. The piece is constructed from two alternating sets of vertical and horizontal rectangles, each masked to reveal different geometric symbols. D3’s `select`, `range`, and `symbol` functions generate the masks and position the shapes across the canvas, using seven distinct symbol-driven bands to create the final composition. The SVG output fills the browser window, with each band offset horizontally to mirror the original artwork’s grid-based design.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3 - inesh

This example reproduces a Sol LeWitt artwork using D3 v3 and SVG. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two mask patterns cutting through them to create a dynamic geometric composition. The code uses `d3.select`, `d3.range`, and `d3.symbols` to generate shapes, and constructs two SVG masks via `renderMask`—one inverted and one standard—each containing a row of symbols applied to the rectangular bands. The rendering is purely SVG-based, with no external data source, and the layout adapts to the full browser window.

Iineshp2020@gmail.com
94% match
Loading thumbnail…

Full Sol LeWitt Piece Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate SVG shapes. It layers horizontal and vertical striped rectangles, each filtered by a separate mask. The masks are built from alternating black and white bands containing geometric symbols, such as arcs and lines, drawn with the `symbol` and `symbols` APIs. By inverting the mask colors, the piece creates intersecting patterns across the full browser window, with the rendering using D3’s `select`, `range`, and `join` methods for efficient SVG construction.

MMika Kutila
91% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG composition. Two sets of one hundred thin rectangles—one horizontal, one vertical—are overlaid using D3’s `select`, `range`, and `join`. Two SVG masks, created with `symbols[1]` (a diamond) and `renderMask`, invert the pattern’s visibility, leaving a diamond-shaped cutout in each orientation. The `svg.call` method applies both masks, and the code uses `window.innerWidth` and `window.innerHeight` to size the canvas.

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

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

WWolfgang
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 Draft

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

AAndre J Denais
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This reproduction of a Sol LeWitt wall drawing uses D3.js version 7.8.5 to render layered horizontal and vertical stripes across the full browser window. The SVG output applies two distinct masks to each set of stripes, with each mask containing a row of geometric symbols generated via `d3.symbols` and `d3.symbol`. The inverted mask (white background with black symbols) and non-inverted mask (black background with white symbols) create the contrasting visual interplay characteristic of LeWitt's systematic instructions.

Nnim@brejnholt.dk
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher
89% match