Sol LeWitt Reproduction with D3

100%

Sol LeWitt Reproduction with D3

✓ Published1🌍 Public

Last edited May 25, 2023

Created on May 17, 2023

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.

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 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.

AAngie Va. Moreno

94% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher

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

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of a Sol LeWitt art piece uses D3 to draw intersecting horizontal and vertical striped bands filtered by two complementary masks. The SVG rendering employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.scaleBand` to place alternating white and black symbol shapes within each mask, creating a woven visual pattern. The masks alternate transparency to combine the striped layers, producing a geometric composition that echoes LeWitt’s systematic wall drawings.

CCurran Kelleher

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

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

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

91% match