Skip to main content
SimilarExport ZIP
100%

LeWitt Recreation w/ D3

✓ Published3🌍 Public
MMarvin Frede
Last edited Sep 28, 2023
Created on Sep 27, 2023

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

AI-generated description

A bare minimum HTML page demonstrating use of D3 following the course of Curran Kelleher on YouTube

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered
90% match
Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell
90% match
Loading thumbnail…

so lewit reproduction D3.js fundamental

This example reproduces a Sol LeWitt–style drawing using D3.js. It generates a grid of horizontal and vertical rectangles, each masked to reveal a circular cutout at the center of the screen. The visualization uses D3’s `select`, `range`, and data joins to create 100 rects in each direction, with SVG masks (`url(#circle-mask)`) alternating black and white fills to control visibility. The code relies on D3 v7 and renders entirely as SVG, filling the full browser viewport with no external data.

Ddeebanks77
90% match
Loading thumbnail…

Sol LeWitt in d3

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

TTobi Olabode
89% match
Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber
89% match
Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

DDonald Bagwell
89% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang
89% match
Loading thumbnail…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara
89% match