Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
IIgorGorin00
Last edited Mar 19, 2023
Created on Mar 19, 2023

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin horizontal and vertical rectangles. The horizontal grid is masked to reveal a circular window, while the vertical grid uses an inverted mask, creating a contrasting interplay of lines within and around the central circle. The visualization is rendered as an SVG using D3 v7’s `select`, `range`, and `join` methods, with `mask` elements defining the circular cutouts over a full-screen canvas.

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 example reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays a grid of horizontal and vertical rectangles that are partially visible through a circular mask, creating an intersecting line pattern. The visualization uses D3’s `select`, `append`, and `join` methods to dynamically generate SVG `rect` elements and mask definitions. The code defines two SVG masks—one circular and one inverted—to selectively reveal the shapes, with the page sized to the full browser window. The rendering is entirely SVG-based, with no external data source.

Bbeyzadoganay
95% 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
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3 v3. It displays a grid of thin, alternating horizontal and vertical rectangles whose visibility is selectively masked by two overlapping circular cutouts, creating a layered, minimalist pattern. The implementation uses `d3.select` and `d3.range` to generate 100 rectangles in each direction, applies SVG `mask` elements with white and black fills for inversion, and positions the circles at the canvas center with a radius of 200 pixels. Rendering is done entirely via SVG, sized to the full browser window.

YYingkai Song
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt-inspired geometric composition using two overlapping grids of vertical and horizontal bars. The bars are partially revealed through circular masks, creating a cross-shaped aperture effect at the center of the canvas. The code uses D3 v7’s `select`, `range`, and `join` methods to generate SVG rectangles, with two `mask` elements defining the visible circular regions. The artwork spans the full browser window and renders entirely as SVG, with all positioning computed dynamically from `window.innerWidth` and `window.innerHeight`.

Lliu yang
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It displays a grid of overlaid horizontal and vertical rectilinear lines, with a circular region in the center where the horizontal lines are visible and the vertical lines are masked out. The visualization uses two SVG `<mask>` elements, `circle-mask` and `circle-mask-2`, to selectively hide or reveal line groups, creating an inverted circular contrast. All shapes are rendered as SVG rectangles, sized to the full window, with 100 lines spaced evenly in each direction. The code relies on `d3.select`, `d3.range`, and SVG attribute manipulation.

Aajoua
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69
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