sol l. reprod. w/ d3 (classes)

100%

sol l. reprod. w/ d3 (classes)

✓ Published1🌍 Public

Last edited Jun 8, 2024

Created on Jun 3, 2024

An interactive recreation of Sol LeWitt's geometric art uses D3.js to draw two alternating sets of thin SVG rectangles: horizontal bands across the full screen and vertical bands intersecting them. A circular mask reveals the overlapping pattern in the center, while inverted masks create a negative space effect. The code leverages `d3.select`, `d3.range`, and `svg.attr` to generate the repeating grid structure.

AI-generated description

A recreation of Sol LeWitt's Art

MIT Licensed

Similar vizzes

Loading thumbnail…

sol l. reprod. w/ d3 (group elements)

This visualization recreates Sol LeWitt’s art using D3 version 6.6.1 to draw a grid of horizontal and vertical SVG rectangles. Two overlapping masks, defined via `mask` and `circle` elements, reveal the rectangular marks only inside a large central circle, creating a crosshatched pattern that fades into empty space. The code uses `d3.select`, `range`, and `join` to generate the shapes dynamically based on the viewport dimensions.

Kkhaledakanan@gmail.com

94% match

Loading thumbnail…

FULL sol l. reprod. w/ d3

This visualization recreates Sol LeWitt’s geometric art by using alternating horizontal and vertical bars to form a grid-like pattern. The bars are masked by two overlapping shapes—a circle and an inverted circle—which create intersecting voids in the composition. The code relies on D3’s `select`, `range`, `symbol`, `symbols`, and `mask` APIs to generate SVG elements dynamically. The layout is calculated from the viewport dimensions, and the rendering is entirely SVG-based with no external data source.

Kkhaledakanan@gmail.com

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

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

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

SSalahAnwer-dev

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

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…

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

88% match