Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
YYingkai Song
Last edited Dec 3, 2022
Created on Dec 3, 2022

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.

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

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a grid of overlapping horizontal and vertical rectangles as SVG elements. The piece shows alternating stripes of black and white that intersect within two circular masks, creating a layered, op-art effect across the full browser viewport. The code uses d3.select, d3.range, and selection.join to generate 100 rectangles along each axis, with svg.append('mask') defining two circular regions that invert the fill colors. The rectangles are masked so that one circle reveals white-on-black stripes while the other shows black-on-white, producing a dynamic visual contrast.

FFerasMorsi
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com
94% 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
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

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.

IIgorGorin00
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97
94% match