Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Ssriramvsharma
Last edited Mar 27, 2021
Created on Mar 27, 2021

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v6. It displays a grid of horizontal and vertical lines that remain visible only within two circular regions, creating a layered visual effect through masking. The code uses `d3.select` to create SVG elements and `d3.range` with `join('rect')` to generate 100 line strips in each direction. Two SVG masks (`circle-mask` and `circle-mask-2`) alternate black and white fills to reveal or hide the lines within the circles, all rendered with dynamic window dimensions.

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

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh
92% 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
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering SVG output. It draws a grid of horizontal and vertical rectangular strips across the full canvas, with each strip positioned iteratively. The visualization currently defines two mask elements for potential circular cutouts, though the mask-creation code is commented out. The artwork uses D3’s `select`, `range`, and `symbol` APIs to generate the ordered pattern, with the structure derived from a deterministic repetition of lines.

SShahin Alam
92% match
Loading thumbnail…

Full Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v6. It renders a grid of alternating horizontal and vertical rectangles, with two overlapping circular masks creating a layered black-and-white optical effect at the center of the canvas. The code uses `d3.select`, `d3.range`, and the `.join()` method to bind data to SVG `<rect>` elements, while `<mask>` elements with circles define the visible regions. The visualization fills the entire browser window, with the artwork built entirely from SVG shapes and no external data sources.

PPedram
92% match