Sol LeWitt Reproduction with D3

100%

Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Apr 20, 2023

Created on Apr 20, 2023

Forked from Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative artwork fills the browser window with a grid of overlapping horizontal and vertical bars. The piece uses two SVG masks—one revealing a central circle through dark stripes, the other inverting the effect—to create a dynamic interplay of lines and negative space. Built with D3 v6, the code leverages `select`, `range`, and data joins to render 100 rectangles in each direction, with mask elements defining the circular focal point. The result is a precise, minimalist composition that echoes LeWitt’s geometric aesthetic while demonstrating D3’s declarative SVG manipulation.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical stripes. The piece uses two circular SVG masks to invert the stripe pattern within a central circle, creating a subtle visual contrast against the background. The code employs D3.js version 7.8.4, utilizing `select` and `range` from the library to construct SVG elements. Rendering is done entirely through SVG. The `append`, `attr`, and `join` methods are used to build the masks and the striped rectangles programmatically, with the masks defining the visible region.

CClaudio Puggioni

94% match

Loading thumbnail…

Sol LeWitt Repro w/ D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical bars whose visibility is controlled by inverted SVG masks, creating a distinctive halftone pattern. The code uses D3 v7’s `select`, `selectAll`, and `data().join()` to bind an array of 100 rectangle marks to SVG `rect` elements, each masked via `url(#mask-Inv)`. A central circular mask region inverts the bar visibility, producing the artwork’s characteristic optical interplay.

Hhelloelectro

94% match

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

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3. It displays a grid of horizontal and vertical bars overlaid with two circular masks, creating a crosshatched pattern that alternates visibility within and outside the circles. The code uses D3 selections, `range()`, and SVG masks (`mask` elements) to generate the repeating rectangles. It employs `d3.select`, `append`, and `attr` with data-driven joins, rendering entirely as SVG in the browser. The art piece is recreated computationally, with the layout determined by the window dimensions.

XXuân Vinh

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This piece recreates a Sol LeWitt wall drawing using D3.js to generate layered, mask-based geometric forms. It displays a grid of horizontal and vertical lines that intersect within a central circular region, creating a dynamic visual pattern. The code uses the D3 selection API and raw SVG elements, employing two circular masks to selectively reveal the line structures. The rendering is dynamically sized to fit the browser window, producing an interactive, generative art experience.

Ssean@wall.ninja

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

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

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais

91% match