Skip to main content
SimilarExport ZIP
100%

Sol LeWitt reproduction with d3 (symbols)

✓ Published1🌍 Public
FFrancisco Ibelles
Last edited Feb 8, 2024
Created on Feb 8, 2024

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

AI-generated description

Example of a picture create for le author Sol LeWitt

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles
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…

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…

Sol LeWitt Reproduction with D3 ()

This example reproduces a Sol LeWitt-inspired piece using D3.js. Vertical and horizontal black bars are generated as SVG rectangles across the full canvas, with a circular mask and a larger irregular star-like symbol mask carving out white negative space in the center. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to define the bar spacing and the vector path for the second mask. Both masks are applied via SVG `<mask>` elements to reveal the intended graphic contrast.

Nnim@brejnholt.dk
90% match
Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru
90% 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
90% 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
90% match