Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3 - Part III

✓ Published1🌍 Public
WWolfgang
Last edited May 7, 2021
Created on May 7, 2021

A Sol LeWitt–style geometric composition uses layered horizontal and vertical stripes, with two SVG masks—one inverted—cutting circular symbol shapes through the grid. The code generates 100 stripes in each direction using D3’s `range` and `selectAll().join()`, then defines masks with `d3.symbol` and `symbols` to create the cutouts. Rendering is done entirely in SVG, with the page set to full-viewport dimensions. The masks alternate between black and white fills to reverse which areas remain visible, producing a subtle interplay between the striped background and the symbol-shaped voids.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with Background

A full-screen grid of alternating horizontal and vertical stripes is overlaid with masks that punch out repeating geometric symbols, creating a dynamic, woven composition. The example uses D3.js methods including `select`, `range`, and `symbol` to generate and position SVG elements. Two masks apply contrasting patterns: one uses white and black rectangular bands with D3 symbols to reveal the horizontal stripes, while the other applies the inverse logic to the vertical stripes. The result is a layered, shifting optical effect driven entirely by SVG masking and D3’s data-join.

Mmaciekawsq@gmail.com
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction D3 v2

A full-screen D3 visualization reproduces Sol LeWitt’s wall drawing using 48 horizontal and 48 vertical striped rectangles. Two SVG masks, created with `d3.symbol` and the `symbols[0]` diamond path, define circular cutouts that invert the stripe pattern. The code uses D3 v7’s `select`, `range`, and `join` to generate elements, with the second mask rendered in opposite fill colors to create a contrasting central motif. Rendering is purely SVG-based without animation.

Ttverdone
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

SSami Friedrich
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

Ttverdone
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This reproduction of a Sol LeWitt wall drawing uses D3.js version 7.8.5 to render layered horizontal and vertical stripes across the full browser window. The SVG output applies two distinct masks to each set of stripes, with each mask containing a row of geometric symbols generated via `d3.symbols` and `d3.symbol`. The inverted mask (white background with black symbols) and non-inverted mask (black background with white symbols) create the contrasting visual interplay characteristic of LeWitt's systematic instructions.

Nnim@brejnholt.dk
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a full Sol LeWitt art piece using D3, displaying a grid of horizontal and vertical stripes that are selectively masked by geometric symbols. The artwork shows alternating bands of lines, with the vertical stripes masked by filled shapes and the horizontal stripes partially obscured. The code uses D3’s `select`, `range`, and `symbols` APIs to generate SVG rectangles and mask paths, rendering 100 lines in each direction across the full browser window. Two separate masks apply contrasting white and black fills to create the overlapping pattern effect.

PPareel Amre
91% match