Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
Ttriciascully
Last edited Mar 21, 2023
Created on Mar 21, 2023

This example reproduces a Sol LeWitt piece, displaying a grid of horizontal and vertical lines masked to reveal a central circle. The artwork uses 100 horizontal and 100 vertical rectangles, each 10 pixels thick, with a circular mask applied to create the intersecting form. Built with D3.js (v6.6.1), the code uses `select`, `range`, and the `append` and `attr` methods to construct and style the SVG elements directly, dynamically sizing the piece to the browser window.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher
93% match
Loading thumbnail…

Sol LeWitt Reproduction D3

This D3.js reproduction of a Sol LeWitt art piece uses two sets of alternating horizontal and vertical grid lines made of thin rectangles, each set partially hidden by a circular mask. The first mask reveals a white circle on a black background, while the second shows the inverse, creating a visual interplay between the two line orientations. Built with the d3 `select`, `range`, and `symbols` APIs, the SVG rendering fills the entire browser window and uses 100 lines in each direction. The piece references LeWitt’s geometric wall drawings, translating his grid-based concept into dynamic, screen-filling linework.

AAndrey Matukhno
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt artwork generates a grid of 100 horizontal and 100 vertical SVG rectangles, each 10 pixels thick, which are masked by two opposing circular shapes. Using the `select` and `range` APIs from d3, the code appends SVG elements and utilizes two masks—one hidden by a black rectangle with a white circle, the other with inverted colors—to create an intersecting ring pattern. The final visualization, sized to the full browser window, forms a crosshatched composition with circular cutouts, demonstrating D3's declarative `.join` method for efficient element creation.

Jjmetzg11alpine
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This piece recreates a Sol LeWitt wall drawing using D3.js to generate layered, mask-based geometric forms. It displays a grid of horizontal and vertical lines that intersect within a central circular region, creating a dynamic visual pattern. The code uses the D3 selection API and raw SVG elements, employing two circular masks to selectively reveal the line structures. The rendering is dynamically sized to fit the browser window, producing an interactive, generative art experience.

Ssean@wall.ninja
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