Fork of Sol LeWitt Reproduction with D3

100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Jun 7, 2024

Created on Jun 7, 2024

Forked from 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.

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 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

96% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3, rendering 100 horizontal and 100 vertical rectangles that intersect in a grid-like pattern. The visualization shows a central circular area where the rectangles are visible, while the surrounding regions are masked out. It uses d3.select to create an SVG, d3.range with data joins to generate the rectangles, and SVG mask elements with circles to create the circular cutout effect. The code iterates through both orientations to layer the marks.

Aaalyousfi

95% 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

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 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

95% match

Loading thumbnail…

Fork of Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical rectangles. The rectangles are masked by circles, creating an interlocking pattern where the horizontal bars show through a white circle and the vertical bars show through a black circle on a contrasting background. The code uses D3 selections and the `range` function to create 100 rectangles in each direction, applying SVG mask elements with rectangle and circle shapes. The visualization renders entirely in SVG, filling the browser window with the geometric composition.

DDilara Bozkurt

95% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

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.

Kkevingu12012001@gmail.com

95% 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