Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Kkevingu12012001@gmail.com
Last edited Feb 14, 2025
Created on Feb 14, 2025

This example reproduces a Sol LeWitt art piece using D3.js version 6, rendering 100 horizontal and vertical striped rectangles that intersect within a circular mask. The visualization shows overlapping line patterns confined to a central circle, created with SVG masks that selectively reveal the grid-like composition. The code uses d3.select, d3.range, and data joins to generate the rect elements, while two SVG mask definitions control which portions of the stripes remain visible. The artwork fills the entire browser viewport with a black-on-white aesthetic.

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 visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6, rendering a grid of horizontal and vertical stripes masked by two concentric circles. The visualization shows a geometric pattern of alternating line thicknesses, with the circular masks creating a layered negative-space effect. The code uses `d3.select`, `d3.range`, and `join` to generate SVG rectangles, while SVG `<mask>` elements with `circle` and `rect` shapes define the visible regions. All rendering occurs client-side in SVG, with dimensions set to the full window size.

AAdityan Nainar
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos
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
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6 with SVG rendering. It draws 100 horizontal and 100 vertical rectangles that are partially hidden by two circular masks, creating a geometric grid pattern with a circular cutout effect. The code uses `d3.select`, `d3.range`, and the `.join()` pattern to generate the rectangles, while masks are constructed with SVG `mask` elements. The visualization fills the entire browser window and is rendered entirely through SVG attributes.

Mmkarnam.mahendra@gmail.com
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The visualization shows overlapping line patterns where a circular mask inverts the stripes, creating a contrasting circular region in the center of the composition. The code uses D3’s `selection` API to append SVG elements, including rectangles and masks with white and black fills, to generate the alternating bands. It uses the `d3` library version 7.8.5 and dynamically sizes the canvas to the browser window.

Hhaithamradhi
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using overlapping horizontal and vertical striped rectangles, masked to reveal a central circular form. The code employs D3 v6 selections and data joins to generate 100 thin rect elements in each orientation across the full viewport. Two SVG mask definitions combine black-and-white rectangles with circles to create the complementary positive-negative masking effect. The example demonstrates D3’s declarative approach to SVG manipulation, using the `select`, `range`, and `.join()` methods to efficiently bind data to DOM elements.

PPraveenSehra
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, drawing 100 horizontal and vertical striped rectangles across the full viewport. The code applies two SVG masks—a circle-mask and a circle-mask-2—to show the grid pattern only within circular regions at the center of the canvas, while the outer areas remain blank. Built with D3’s `select`, `range`, and chained `join('rect')` operations, it renders with SVG and uses the `append('mask')` method to create the overlapping circular reveals.

Sshayan yadegaridehkordi
94% match