Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
CCheah Peng Huat
Last edited Jul 9, 2024
Created on Jul 9, 2024

A reproduction of a Sol LeWitt wall drawing renders an abstract geometric composition using D3 and raw SVG. The piece shows a circular region at the canvas center, filled with alternating horizontal and vertical black-and-white stripes that crisp boundary. The code builds SVG elements directly, using a circle mask with two nested masks to divide the stripe layers: horizontal rects clipped by one circle mask, and vertical rects clipped by another inverted mask. It uses no D3-specific APIs, relying on native `document.createElementNS` and `setAttribute` to generate 100 rect stripes per direction.

AI-generated description

A reproduction of a [Sol Lewitt art piece]

MIT Licensed

Similar vizzes

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

Sol LeWitt reproduction with D3

This D3.js reproduction of a Sol LeWitt piece covers the viewport with two sets of striped rectangles—horizontal bands and vertical bands—that intersect at a central circular area. The rendering uses SVG masks (`circle-mask` and `rect-mask`) to selectively reveal or hide stripes, creating the illusion of a circular window through the grid. The code draws 100 rects in each orientation, layering them with opposite mask fills to alternate visibility. This generative artwork leverages D3's `select`, `range`, and `join` API to build the SVG structure dynamically, scaling to the full window size.

DDilara Bozkurt
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt art piece generates two sets of horizontal and vertical stripes across the viewport, masked to create two circular cutouts in the center. Using `d3.select`, `d3.range`, and the `.join('rect')` API, it renders 100 rectangles in each direction, with SVG masks (`circle-mask` and `circle-mask-2`) alternating black and white fill to reveal the layered stripe pattern. The piece is simple, deterministic, and scales to the full browser window.

DDuckGorilla
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders 100 horizontal SVG rectangles at staggered y-positions, each masked by a circular cutout centered on the viewport. The code uses d3.select to append an SVG element sized to the window, binds data via .data() and .join(), and applies a reusable mask defined with SVG’s mask and circle elements. The resulting composition layers thin striped bands inside a circular aperture, evoking LeWitt’s geometric wall drawings. Rendering is done entirely with declarative SVG attributes, with no external data source.

Cchacon1@uic.edu
92% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Uulrichzhan
92% match
Loading thumbnail…

Sol lewitt reproduction in D3

A D3.js reproduction of a Sol LeWitt drawing renders alternating horizontal and vertical black stripes on a light gray canvas. The piece uses generated SVG rectangles, created with `range` and `.join('rect')`, and defines two SVG masks—`circle-mask` and `circle-mask2`—to clip the stripes into two circular forms. The first mask reveals horizontal stripes inside a white circle, while the second reveals vertical stripes in the inverse pattern, creating an intersecting optical composition across the full browser window.

Ssheldonv2.0@gmail.com
92% match
Loading thumbnail…

Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It renders a grid of horizontal and vertical SVG rectangles across the full window, with each set masked to reveal intersecting circular cutouts at the center. The visualization relies on d3.select, d3.range, and SVG mask elements to layer two sets of stripes, alternating black and white fills within the circles. The result is a clean, minimal pattern that mimics the artist’s systematic approach to drawing, with no data input beyond the generated grid dimensions.

Mmaciekawsq@gmail.com
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3.js

A D3.js reproduction of a Sol LeWitt art piece uses 100 horizontal and vertical striped rectangles overlaid with two circular SVG masks to create a geometric grid pattern with an intersecting circle. The horizontal bars are masked by a black background with a white circle, while vertical bars use an inverse white mask with a black circle, producing a contrasting visual effect. Built with d3.select and d3.range, the SVG rendering fills the entire browser window. The code includes commented-out decoupled and vanilla JavaScript alternatives.

MMarcus Vinicius da Silveira Richa
92% match