Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
Gguts
Last edited Oct 11, 2023
Created on Oct 11, 2023

This example reproduces a Sol LeWitt art piece as a full-screen SVG. It creates 100 horizontal and 100 vertical bars, each with a fill mask, layering them to form a grid. The masks use a circle to reveal a central disk, with the second mask inverting the effect. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements and masks.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - non-class

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical bars in an SVG. The bars are masked by two circular masks with inverted fills, creating a crosshatched grid that appears only within the intersecting circular regions. The visualization uses D3's `select`, `append`, `attr`, `data`, `range`, and `join` APIs to build the SVG structure and apply the mask attributes.

KKhanin Sisaengsuwanchai
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using SVG and D3. It displays a grid of 100 horizontal and vertical bars, each 10 pixels thick, layered over one another. A circular mask isolates a portion of the grid, creating an interplay between the two orientations. The code uses `d3.select` and `d3.range` to generate the rectangle elements, with two masks (`circle-mask` and `circle-mask-2`) defining the visible region. The rendering approach relies on SVG attributes for positioning and masks, with the canvas size set to the full window dimensions.

IIgorGorin00
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3. It displays a grid of horizontal and vertical bars overlaid with two circular masks, creating a crosshatched pattern that alternates visibility within and outside the circles. The code uses D3 selections, `range()`, and SVG masks (`mask` elements) to generate the repeating rectangles. It employs `d3.select`, `append`, and `attr` with data-driven joins, rendering entirely as SVG in the browser. The art piece is recreated computationally, with the layout determined by the window dimensions.

XXuân Vinh
93% match
Loading thumbnail…

Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt drawing using D3 and SVG renderings. Two sets of 100 thin rectangles are drawn—one horizontal and one vertical—creating a grid-like pattern. Each set of rectangles is masked by a circular region: the horizontal bars use a mask with a central white circle on black, while the vertical bars use an inverse mask with a black circle on white. The result shows a grid within a circular window, with the horizontal and vertical lines swapping visibility inside and outside the circle. The code uses `d3.select`, `d3.range`, `svg.append`, and `.join()` to build the SVG elements and masks programmatically.

Yyankesswang
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang
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…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

SSalahAnwer-dev
93% match