Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
DDuckGorilla
Last edited Jan 16, 2022
Created on Jan 16, 2022

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping sets of thin horizontal and vertical rectangles. The drawing applies two distinct SVG masks to each set, creating a crosshatched grid that visually inverts where the shapes intersect. Built with D3 v6, it generates 100 rectangles per axis using `range` and `selectAll().join()`, while the `symbol` API draws a diamond-shaped mask path. The final SVG adapts to the full browser window size, with masks rendered through appended `<mask>` elements.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

Rroyable88
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical striped rectangles, with two SVG masks revealing different symbol shapes at their intersection. The visualization generates 100 thin rectangular bands along each axis, then applies mask-1 and mask-2 to selectively display or hide regions based on d3 symbols. Built with D3 v6, the code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to create the masked effects, rendering entirely in SVG within a full-viewport canvas.

GGbemiga Atolagbe
93% 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 Full Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of thin horizontal and vertical rectangles on an SVG canvas. Two masks—one with a white background and black diamond shape, the other inverted—overlay the grid, so the lines are partially visible through the cutout areas. The code uses d3.select, d3.range, and d3.symbol to generate the shapes and apply the mask effects. The final artwork is static, with masks and grid lines defined programmatically at full window dimensions.

Kkwambokar
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical stripes. Two sets of SVG rectangles are drawn across the full width and height of the viewport, each filtered through a separate SVG mask. The masks reveal or hide portions of the stripes using a row of D3 symbol shapes (from `d3.symbol`), with one mask inverted. The visualization uses D3 v6 selections, `range`, and `join` to generate the elements, and renders entirely as SVG in the browser.

CCurran Kelleher
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A grid of horizontal and vertical black lines forms a full Sol LeWitt–style drawing, masked by overlapping diamond shapes to reveal alternating line orientations. Using D3 v7, the code creates 100 horizontal and 100 vertical rectangles on an SVG canvas, each masked via `d3.mask` with a large `symbol` path. The `renderMask` function appends SVG `<mask>` elements, using `select.append` and `attr` to set fill colors and transforms, producing the final geometric pattern.

Nnim@brejnholt.dk
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v7, displaying 100 horizontal and vertical striped rectangles that overlap to create a grid pattern. Two SVG masks, each containing a large diamond symbol, selectively hide portions of the stripes, revealing the geometric interplay between the layers. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes, with masks defined via SVG `<mask>` elements and rendered as a static SVG scene.

Gguts
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua
91% match