Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Reproduction with D3-2

✓ Published1🌍 Public
Yyejichun@naver.com
Last edited Jul 12, 2024
Created on Jul 12, 2024

A D3.js reproduction of a Sol LeWitt wall drawing combines horizontal and vertical bars into a grid. The SVG uses two masked groups: one layer of horizontal rectangles and another of vertical rectangles, each clipped by a circular mask created with `d3.select` and `attr`. The masks invert their fills, revealing a centered circle where the bars intersect. The code uses `d3.range` and data joins to generate 100 rects per axis, resizing to the full 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 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
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

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

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 to generate a grid of horizontal and vertical rectangles. It shows two sets of 100 thin bars, one stacked vertically and one horizontally, which intersect to form a fine lattice across the full browser window. The code uses SVG masks with `d3.select` and `range` to reveal a central 200-pixel-radius circle where one set of bars appears white on black, while the other appears black on white, creating a contrast inversion. The visualization is rendered with SVG elements created via `append` and `join` within the D3 v7 library.

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

Sol LeWitt Reproduction with D3

A D3.js web page reproduces a Sol LeWitt-style geometric composition by generating a grid of thin horizontal and vertical bars across the full browser window. The bars are drawn as SVG `rect` elements, created with `d3.range` and bound via `selectAll` and `join`. Two SVG masks, each containing a rectangle and a circle, selectively reveal the bars: the horizontal set remains visible only within a central white circle on black, while the vertical set appears outside that circle, producing an intersecting pattern against a white background.

Aadityapalliyil0@gmail.com
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3.js

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.

MMarcus Vinicius da Silveira Richa
92% match