Skip to main content
SimilarExport ZIP
100%

D3 Sol LeWitt Reproduction

✓ Published1🌍 Public
AArnulfotos
Last edited Feb 18, 2023
Created on Feb 18, 2023

This example reproduces a Sol LeWitt-inspired wall drawing using a full-screen SVG canvas. It generates a grid of horizontal and vertical bands with D3’s `range()` and `selectAll().join()` pattern, creating 100 stripes in each direction. Two SVG masks with central circles reveal overlapping stripe patterns: one masks horizontal stripes with a white circle on black, the other masks vertical stripes with a black circle on white. The result produces a dynamic, intersecting geometric composition that shifts with the viewer’s window size.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Sol LeWitt Reproduction a la class

This example reproduces a Sol LeWitt wall drawing using a grid of horizontal and vertical SVG rectangles that are selectively revealed through two circular masks. The masks invert their fill colors so that one circle exposes horizontal stripes while the other exposes vertical stripes, creating an intersecting cross-hatch pattern. The code uses D3 v6 selection methods like `select` and `range` to generate 100 rectangles in each direction, with SVG `mask` elements defining the circular regions. The visualization fills the entire browser window and renders entirely as vector graphics.

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

FULL D3 Sol LeWitt Reproduction a la G

This example reproduces a Sol LeWitt-inspired drawing using D3 version 6 in an SVG. It layers 100 horizontal and 100 vertical stripes across the full viewport, which are selectively revealed through two masks. The first mask uses a large diamond symbol from `d3.symbol` to cut a hole in the horizontal stripes, while the second mask employs a circle to reverse the effect on the vertical lines. The code constructs these masks with `svg.append('mask')` and positions elements dynamically with `window.innerWidth` and `window.innerHeight`.

AArnulfotos
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

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

Sol LeWitt Reproduction D3 reduced AG

This example reproduces a Sol LeWitt wall drawing using only horizontal and vertical stripes. Two sets of 100 rectangles are drawn across the full width and height of the browser window, with each set masked to reveal a circular area at the center. The SVG rendering uses the D3.js library’s `select`, `range`, and `join` APIs to build the rectangles and apply two mask definitions. The circle in the first mask is white, while the second mask uses a black circle on a white field, creating a cross-shaped overlap of the two stripe orientations.

Gguththered
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk
91% match