Full Sol LeWitt with D3

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Wwgloss

Sol Lewitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using the D3 library. It generates a grid of horizontal and vertical rectangles overlaid with SVG masks containing geometric symbols. The masks, populated with shapes from D3's `symbols` and `symbol` functions, create the intersecting patterns. The code uses D3's `select`, `range`, and `join` APIs to build the SVG structure and apply the masks.

Nnicolekevans

MMarcus Vinicius da Silveira Richa

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

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

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

Full Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt wall drawing using a grid of thin horizontal and vertical rectangles generated with d3's `range`, `select`, and `join` methods. An SVG mask with a circular `symbol` path creates a central aperture, revealing the underlying grid in contrasting hues. The code renders entirely in-browser with React, using procedural loops to construct the 100x100 element pattern.

Cclara7227

Sol LeWitt D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js and SVG masks. A grid of horizontal and vertical rectangles is clipped by two complementary circular masks, creating intersecting bands that reveal or hide lines in alternating regions. The visualization uses `d3.select`, `d3.range`, and `join` to generate the rectangles, with masks defined via SVG `mask` elements. The layout fills the browser window, and the code runs in a React environment with SVG rendering.

JJamie