Sol lewitt reproduction in D3

100%

Sol lewitt reproduction in D3

✓ Published2🌍 Public

Last edited Jan 29, 2025

Created on Jan 26, 2025

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.

AI-generated description

We are implimenting sol leweitt work in this file in d3

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre

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 with D3

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.

CCheah Peng Huat

92% 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

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

Loading thumbnail…

Sol LeWitt Reproduction with D3 Tests

This D3.js reproduction of a Sol LeWitt artwork generates an SVG pattern of horizontal and vertical stripes across the full browser window. It uses D3’s `select`, `append`, and `range` APIs to create 100 rect elements per orientation, with each stripe masked by a circle that either reveals or hides the stripes. Two masks are rendered with inverted black-and-white fills, creating a circular intersection of differently oriented line fields. The piece visualizes geometric abstraction through code, relying on SVG masks and D3’s data-driven element joins.

HHelip3

91% match