Skip to main content
SimilarExport ZIP
100%

4:50 So LeWitt Reproduction with D3

✓ Published1🌍 Public
Mmax-31
Last edited Aug 25, 2022
Created on Aug 25, 2022

This example reproduces Sol LeWitt’s wall drawing “4:50” using D3 with SVG rendering. Two sets of 48 alternating thin horizontal and vertical rectangles intersect, each masked by a distinct pattern of D3’s built-in symbol shapes (such as circles and crosses). Masks are generated with the `symbol` API and applied via the `mask` attribute, using inverted fill colors to create contrasting cutout effects across the grid. The scene fills the entire viewport, with rectangles positioned using D3’s `range` and `join`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 to generate intersecting horizontal and vertical SVG rectangles. A pair of SVG masks with circular cutouts reveal the lines only within two offset circles, creating an optical moiré pattern across the full viewport. The code uses `d3.select`, `d3.range`, and SVG `mask` elements, rendering 100 stripes in each direction with dimensions tied to `window.innerWidth` and `window.innerHeight`. The result is a precise, generative interpretation of LeWitt’s geometric style, driven entirely by D3’s data join and SVG primitives.

Nnpinta
91% match
Loading thumbnail…

Sol Lewitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using the D3 library. It generates a grid of horizontal and vertical rectangles overlaid with SVG masks containing geometric symbols. The masks, populated with shapes from D3's `symbols` and `symbol` functions, create the intersecting patterns. The code uses D3's `select`, `range`, and `join` APIs to build the SVG structure and apply the masks.

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

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
90% match
Loading thumbnail…

5:08 Exercise So LeWitt Reproduction with D3

A generative art piece reproduces a Sol LeWitt-inspired composition using D3 v7. The visualization renders a grid of overlapping thin rectangles on an SVG canvas, masked by patterns of colored shapes and symbols. It uses `d3.range`, `d3.symbols`, and `d3.symbol` to create the mask elements, with rectangle positions calculated from the window dimensions. The two masks invert their fill colors to produce contrasting effects across the horizontal and vertical stripe layers.

Mmax-31
90% match
Loading thumbnail…

3 try of Sol Lewitt reproduction with d3

This example recreates a Sol LeWitt-inspired wall drawing using D3.js and SVG. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each strip assigned a mask that clips it into a repeating pattern of D3’s built-in symbol shapes (circles, crosses, diamonds, and triangles). Two masks are applied: one uses black symbols on white, the other inverts the fill, creating contrast between the two overlapping grids. The code builds masks programmatically via a reusable `renderMask` function and leverages D3’s `range`, `symbol`, and `symbols` APIs to generate the clipped geometry.

Cclara7227
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…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH
90% match