Full Sol LeWitt D3

100%

Full Sol LeWitt D3

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example shows a large grid of horizontal and vertical stripes that appears to be interwoven, with geometric symbols such as circles, diamonds, and triangles emerging from the pattern. It generates 100 striped bands in each direction and uses two SVG masks to selectively hide portions of the grid, creating the illusion of layered shapes. Built with D3 v7 and React, the code uses `select`, `range`, `symbols`, and `symbol` to draw the mask paths, with `renderMask` applying the inverted fill logic. The rendering approach is purely SVG-based, sized to the full browser window.

Ccharlieronchetti@gmail.com

93% match

Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

JJMeltzer92

92% match

Loading thumbnail…

full symbol D3 Sol Le Witt Vertical

This example generates a Sol LeWitt-inspired grid of vertical and horizontal stripes, with each stripe masked by an abstract symbol. Two separate groups of `<rect>` elements are drawn across the full width and height, and each group is assigned a different SVG mask. The masks are created using D3’s `symbol` and `symbols` APIs to render shapes like circles and crosses, with one mask inverted to produce contrasting cutout effects. The visualization relies on D3 selections and data joins to render the grid dynamically at full viewport size.

SShannon Teoh

92% match

Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com

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

91% match

Loading thumbnail…

full Sol LeWitt-d3

This example displays a full-screen grid of horizontal and vertical stripes within two circular masks, creating an overlapping pattern of lines at the center of the viewport. The visualization generates 100 rectangles for each orientation using `d3.range`, appending them to SVG groups via `d3.select` and the `join` operation. Two SVG masks, one with a black background and white circle and the other inverted, control visibility of the stripes, producing a dynamic interplay of crisp bands within the circular boundaries. The rendering is built with React, uses the d3 library version 6.6.1, and outputs to SVG.

Bbillzhou2005

91% match

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Bbillzhou2005

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

91% match