Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3.js

✓ Published1🌍 Public
MMarcus Vinicius da Silveira Richa
Last edited Mar 19, 2023
Created on Mar 18, 2023

A D3.js reproduction of a Sol LeWitt art piece uses 100 horizontal and vertical striped rectangles overlaid with two circular SVG masks to create a geometric grid pattern with an intersecting circle. The horizontal bars are masked by a black background with a white circle, while vertical bars use an inverse white mask with a black circle, producing a contrasting visual effect. Built with d3.select and d3.range, the SVG rendering fills the entire browser window. The code includes commented-out decoupled and vanilla JavaScript alternatives.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre
95% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt art piece generates two sets of horizontal and vertical stripes across the viewport, masked to create two circular cutouts in the center. Using `d3.select`, `d3.range`, and the `.join('rect')` API, it renders 100 rectangles in each direction, with SVG masks (`circle-mask` and `circle-mask-2`) alternating black and white fill to reveal the layered stripe pattern. The piece is simple, deterministic, and scales to the full browser window.

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

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders 100 horizontal SVG rectangles at staggered y-positions, each masked by a circular cutout centered on the viewport. The code uses d3.select to append an SVG element sized to the window, binds data via .data() and .join(), and applies a reusable mask defined with SVG’s mask and circle elements. The resulting composition layers thin striped bands inside a circular aperture, evoking LeWitt’s geometric wall drawings. Rendering is done entirely with declarative SVG attributes, with no external data source.

Cchacon1@uic.edu
94% match