Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Yyankesswang
Last edited Oct 23, 2022
Created on Oct 23, 2022

This example renders a Sol LeWitt-inspired geometric composition using D3 v6 in an SVG container. It draws 100 horizontal and 100 vertical rectangular bands across the full viewport, each masked to reveal circular cutouts at the center. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse fill patterns—one black with a white circle, the other white with a black circle—so the overlapping stripes form a crosshatched grid with a circular void. The visualization uses `d3.select`, `d3.range`, and data joins via `.join('rect')` to generate the marks.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It renders a grid of horizontal and vertical SVG rectangles, each masked to reveal a circular cutout in the center. The visualization uses two overlapping D3 selections with `mask` attributes to create alternating stripes visible only in the circular region. The code leverages D3’s `select`, `range`, and data joins to generate elements efficiently. The full-screen SVG canvas displays 100 horizontal and vertical bands, with the second mask inverting the visibility pattern to achieve the final layered effect.

CCurran Kelleher
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, displaying a grid of overlapping horizontal and vertical stripes that form a circular pattern through SVG masks. The code uses `d3.select`, `d3.range`, and `join` operations to render 100 rect elements in each direction, with the stripes visible only through two circular mask regions. The first mask reveals alternating bands inside a white circle, while the second creates an inverse effect, producing a geometric interplay of lines. The rendering approach combines D3's data-join with native SVG mask and circle elements to achieve the Op-art style composition.

CCurran Kelleher
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition, generating a grid of overlaid horizontal and vertical stripes that are masked to reveal a central circle. The visualization uses D3 v6 to create an SVG scene, drawing 100 rectangles in each orientation and applying two masks with contrasting black-and-white circular cutouts to shape the final pattern. The rendering fills the entire browser window, with the circle positioned at the center of the viewport.

DDuckGorilla
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece, drawing 100 horizontal and 100 vertical rectangles across the entire viewport. It shows the interplay of overlapping lines masked to reveal a circular void in the center, where the horizontal bands cut through a white circle and the vertical bands appear around a black circle. The visualization uses D3 v6 selection methods and joins, with SVG mask elements, `range`, and `join` to bind data and render the geometric composition.

LLívia Rocha
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3 version 6. It displays a grid of alternating horizontal and vertical black rectangles, masked to reveal a central white circle against a dark background, creating a cross-hatched circular motif. The code uses `d3.select`, `range`, and data joins (`.join()`) to generate SVG `<rect>` elements dynamically. Two SVG masks (`circle-mask` and `circle-mask-2`) with white and black circles, respectively, control which parts of the overlapping stroke pattern remain visible. The rendering is entirely SVG-based, with dimensions set to the full browser window.

SSinasirousnejad
93% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3's selection and data-join methods. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each set masked by a circular cutout at the center—one mask inverts the other, creating a striking interlocking grid pattern. The visualization uses D3 v6's `select`, `range`, and `append` APIs to construct the SVG elements and masks, with the circle radius fixed at 200 pixels. The code demonstrates how layered SVG masks can produce complex visual effects from simple rectangular primitives.

MMohammed
93% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Bbtlhgboy@icloud.com
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric composition, showing a grid of horizontal and vertical bars that intersect within a central circular boundary. The piece uses D3 v7 APIs including `select`, `range`, and `join` to generate 100 thin rectangles in each direction, sized to the full viewport. SVG masks (`circle-mask` and `rectangle-mask`) selectively reveal the horizontal lines within a 200-pixel-radius circle, while the vertical lines are inverted so only the outer area appears. The result highlights the interplay between line density and circular cropping, rendered entirely as static SVG elements.

MMofizur Rahman
93% match