Skip to main content
SimilarExport ZIP
100%

Sol LeWitt reproduction with D3 method 2

✓ Published1🌍 Public
LLouis Astorg
Last edited Jul 28, 2022
Created on Jul 28, 2022

This visualization reproduces a Sol LeWitt wall drawing using two sets of alternating horizontal and vertical striped rectangles, with circular masks applied to create a cross-like pattern at the center. The SVG rendering uses D3 v7’s `select`, `range`, and data joins to generate 100 rects in each group, while custom `mask` elements with black and white fills define the visibility of the overlapping grid.

AI-generated description

A reproduction of Sol LeWitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js (v7) reproduction of Sol LeWitt’s Wall Drawing #370 uses SVG masks to create a circular viewing window. The code generates 100 horizontal and 100 vertical striped rectangles across the full canvas, with each set masked to reveal either a white circle on black or a black circle on white. The two masks are defined as `mask` and `mask2`, each containing a full-canvas rect and a 200-pixel-radius circle positioned at the center. The `select` and `range` APIs are used to construct the repeating rect elements via joins.

LLouis Astorg
94% 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
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 (with SVG Groups)

This is a D3.js reproduction of a Sol LeWitt art piece, rendered in SVG. The visualization shows a grid of horizontal and vertical striped rectangles overlaid on the full viewport. Two SVG masks create a central circular cutout: one mask reveals a circle in the upper layer, while the other uses inverted colors to hide the circle in the lower layer, producing a contrasting visual effect. The code uses d3.select, d3.range, and attribute chaining to generate 100 rectangles in each direction, with dimensions tied to the window size.

Nnim@brejnholt.dk
92% 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
92% match
Loading thumbnail…

Sol LeWitt Repro w/ D3 - different method

This example reproduces a Sol LeWitt-inspired wall drawing by filling the screen with horizontal and vertical striped rectangles. It creates 100 rows and 100 columns, each 10 pixels thick, and layers them using two SVG masks to reveal a circular cutout where the orientations intersect. The visualization uses D3 v7’s `select`, `range`, and `join` to append SVG elements, while separate mask definitions with black and white fills control visibility. Rendering is fully SVG-based, with window dimensions driving the canvas size.

Hhelloelectro
92% match
Loading thumbnail…

D3 Sol LeWitt Reproduction a la class

This example reproduces a Sol LeWitt wall drawing using a grid of horizontal and vertical SVG rectangles that are selectively revealed through two circular masks. The masks invert their fill colors so that one circle exposes horizontal stripes while the other exposes vertical stripes, creating an intersecting cross-hatch pattern. The code uses D3 v6 selection methods like `select` and `range` to generate 100 rectangles in each direction, with SVG `mask` elements defining the circular regions. The visualization fills the entire browser window and renders entirely as vector graphics.

AArnulfotos
92% match