Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction in d3 - multi pane01

✓ Published1🌍 Public
Gg1g10
Last edited Aug 12, 2022
Created on Aug 12, 2022

This example reproduces a Sol LeWitt wall drawing using overlapping black stripes and masked geometric symbols. Two sets of thin rectangles are drawn, one horizontal and one vertical, with each set clipped by a distinct SVG mask. The masks are built from large star-shaped paths generated with the d3 `symbol` API, and the entire composition is rendered as SVG. The code uses d3’s `select`, `range`, and `join` methods to construct the elements and applies the masks via `attr('mask', ...)`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane01 -exercise

This example reproduces a Sol LeWitt wall drawing as a generative grid of black horizontal and vertical stripes, whose visibility is controlled by mask layers. The SVG rendering uses custom d3 selections and joins to create bands of `rect` elements, while d3’s `symbol` and `symbols` APIs generate the paths used inside the masks. Two mask definitions, created with `renderMask`, alternate filled and empty regions based on symbol parity, producing an interlocking pattern of geometric shapes across the canvas. The composition adapts to the full browser window size.

Gg1g10
95% match
Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping black grid lines. Horizontal and vertical stripes are drawn across the full screen, with two masks applied to reveal a diamond shape at the center. The inner mask cuts out the diamond from the horizontal lines, while the outer mask obscures the vertical lines outside that shape. Built with d3-selection, d3-range, and d3-symbol, the SVG rendering uses 100 rects per axis and a centered path symbol to define the mask regions.

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

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

PPetrescu Alexandru
91% match
Loading thumbnail…

Sol LeWitt Reproduction - D3 (2)

This example reproduces a Sol LeWitt drawing using D3 version 7. It overlays two sets of striped rectangles—one horizontal and one vertical—each limited to a circular region through SVG mask elements. The horizontal stripes are masked by a circle in a black rectangle, while the vertical stripes use an inverted mask with a black circle on white. The visualization fills the entire browser window, with stripes spaced at 20-pixel intervals. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to achieve the geometric composition.

MMatheesha Yapa
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of Sol LeWitt’s geometric wall drawings, this example uses D3 to compose a dense grid of horizontal and vertical stripes. Two SVG masks, each populated with a row of distinct symbol shapes, selectively hide or reveal the underlying line work to create layered, patterned intersections. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask paths, with `selection.call` applying the mask logic to the main SVG. The result is an algorithmic reinterpretation of LeWitt’s systematic, rule-based art, rendered entirely as vector graphics.

Xxyzcorrupt@gmail.com
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

SSami Friedrich
90% match