Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Kkhaledakanan@gmail.com
Last edited Jun 8, 2024
Created on Jun 8, 2024

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.

AI-generated description

A recreation of Sol LeWitt's Art

MIT Licensed

Similar vizzes

Loading thumbnail…

sol l. reprod. w/ d3 (classes)

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.

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

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher
90% 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
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 (with SVG Groups)

This is a D3.js reproduction of a Sol LeWitt art piece, rendered in SVG. The visualization shows a grid of horizontal and vertical striped rectangles overlaid on the full viewport. Two SVG masks create a central circular cutout: one mask reveals a circle in the upper layer, while the other uses inverted colors to hide the circle in the lower layer, producing a contrasting visual effect. The code uses d3.select, d3.range, and attribute chaining to generate 100 rectangles in each direction, with dimensions tied to the window size.

Nnim@brejnholt.dk
90% 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
90% 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
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs
89% match