Full Sol Lewitt with D3

100%

Full Sol Lewitt with D3

✓ Published1🌍 Public

Last edited Apr 17, 2023

Created on Apr 17, 2023

This example generates a full-screen SVG pattern of alternating horizontal and vertical stripes, with Sol Lewitt-inspired geometric symbols appearing through mask cutouts. Two separate mask layers—each containing a row of D3 symbol shapes—reveal or hide the stripe groups to create layered, interlocking compositions. The visualization uses D3 v6 APIs including `select`, `range`, `symbol`, and `symbols`, with masks defined via `append('mask')` and filled using `rect` and `path` elements. Data is procedurally generated with `range(n)` rather than loaded from an external source.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol Lewitt with D3

This example generates two sets of alternating horizontal and vertical stripes from `d3.range` and renders them as SVG `rect` elements. Each set is clipped by a circular `mask` whose pattern is created from the `d3.symbols` and `d3.symbol` functions, producing a repeated geometric motif. The masks use contrasting fills—black for the first circle and white for the second—so the overlapping stripes appear to weave through the two shapes. The visualization runs entirely in the browser with D3 7.4.4, drawing to an SVG canvas sized by the window height.

TTirth Trivedi

93% match

Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie

90% match

Loading thumbnail…

Full Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG. It uses D3's `select`, `range`, and `join` APIs to generate a grid of alternating horizontal and vertical stripes. Two masks, created with `symbol` and `symbols` from D3, overlay the grid: one applies a white-on-black path pattern, the other inverts it, producing a layered geometric composition. The drawing adapts to the browser window's dimensions, with the mask symbols centered and scaled to a fixed size.

VVincent Leduc

90% match

Loading thumbnail…

Full Sol LeWitt kind of reproduction with D3

This example uses D3 to generate a full-screen SVG reproduction of a Sol LeWitt–style geometric drawing. It renders two alternating sets of vertical and horizontal stripes, each partially masked by rows of D3’s built-in symbol shapes (including circles, crosses, and diamonds). The code leverages `d3.range`, `d3.symbol`, and SVG `<mask>` elements to create the overlapping optical effect, with the masks alternating between inverted and normal fill modes. All drawing is done in the browser using D3 v6 and SVG.

VValentine Solonechnyi

90% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

PPhan Nguyen

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

90% match

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

90% match

Loading thumbnail…

Sol Lewitt with D3

This example recreates a Sol LeWitt-inspired drawing by layering horizontal and vertical stripes within circular masks. The stripes are generated as SVG rectangles using D3's `select` and `range` utilities, with the `join` operator binding data to the DOM. Two SVG masks create contrasting circular windows: one reveals the grid inside a circle, the other creates an inverse ring effect. The visualization adapts to the full browser window, using the viewport dimensions for the canvas size, and renders entirely through SVG elements without a separate data source.

TTirth Trivedi

90% match