Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Xxyzcorrupt@gmail.com
Last edited Jun 16, 2024
Created on Jun 16, 2024

This example reproduces a Sol LeWitt art piece using D3.js and SVG rendering. It displays a grid of horizontal and vertical black lines that form a geometric pattern across the full viewport, with a circular white mask creating a negative-space shape in the center. The code uses D3 selections with `range`, `join`, and `attr` to generate repeated rectangles on each axis, while masks are built with `append('mask')` and SVG circles. The rendering is entirely procedural, generating 100 lines per direction from data arrays rather than loading external data.

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 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 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder
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
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
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
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 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
94% match