Fork of Sol LeWitt Reproduction with D3

100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Aug 31, 2023

Created on Aug 31, 2023

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.

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

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

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

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles across the full browser window. The visualization appears as a dense crosshatch pattern, with a circular region in the center where the lines are inverted—dark lines show through a light circle, while the surrounding area has light lines on a dark background. The code builds an SVG, creates rect elements with D3’s `range` and `join` methods, and applies two SVG masks with circles to achieve the contrasting effect.

FFerasMorsi

94% match