Skip to main content
100%

Full Sol LeWitt Reproduction with D3.

✓ Published1🌍 Public
JJuan Corrales Correyero
Last edited Sep 12, 2023
Created on Sep 12, 2023

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG rendering. It creates two overlapping sets of horizontal and vertical striped rectangles, each clipped by a circular mask with inverted fill patterns to produce intersecting geometric shapes. The code uses `d3.select`, `d3.range`, and `d3.symbol` with `symbols[1]` to generate the mask paths, while `selection.append` and `selection.join` build the 100 rectangles per axis across the full viewport.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It displays two overlapping sets of striped rectangles—horizontal and vertical—that intersect through the use of SVG masks. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate mask shapes, then applies those masks to the rectangles. The masks are created by rendering inverted and non-inverted versions of the symbols, which reveal or hide portions of the grid-like stripes across the full viewport.

JJuan Corrales Correyero
95% match
Loading thumbnail…

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.

MMarcus Vinicius da Silveira Richa
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais
93% match
Loading thumbnail…

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
93% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3-2

This example reproduces a Sol LeWitt art piece using D3 version 6.6.1 with SVG rendering. It displays a grid of horizontal and vertical striped rectangles, overlaid with two masks that reveal or hide the stripes using D3’s `symbol` shapes. The code uses `select`, `range`, `symbols`, and `symbol` to generate mask patterns, and applies them via `attr('mask', ...)` to create the visual effect.

Yyejichun@naver.com
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
92% match