Fork of Sol Lewitt Reproduction

100%

Fork of Sol Lewitt Reproduction

✓ Published0🌍 Public

Last edited Jun 10, 2023

Created on Jun 9, 2023

This example reproduces a Sol LeWitt-inspired drawing using D3.js (v3) to render an SVG canvas. It creates 100 horizontal marks, each with a fixed height and a width equal to the full window width, and applies a circular clipping mask via an SVG `mask` reference. The code uses `select('body').append('svg')` to build the visualization and a JavaScript array to define the mark positions and dimensions, with a simple loop populating the data.

AI-generated description

This is a reproduction of sol lewitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3, rendering 100 horizontal and 100 vertical rectangles that intersect in a grid-like pattern. The visualization shows a central circular area where the rectangles are visible, while the surrounding regions are masked out. It uses d3.select to create an SVG, d3.range with data joins to generate the rectangles, and SVG mask elements with circles to create the circular cutout effect. The code iterates through both orientations to layer the marks.

Aaalyousfi

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as an interactive SVG visualization. Two sets of thin horizontal and vertical rectangles are drawn on a full-window canvas, with circular masks (drawn via D3 masks) applied to reveal a central circular region where the lines intersect. It uses D3 v3's `select`, `append`, and data joins with `range` to generate 100 strips in each direction. The rendering is pure SVG, with masks defining the visible geometry.

AAprilF

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6 with SVG rendering. It draws 100 horizontal and 100 vertical rectangles that are partially hidden by two circular masks, creating a geometric grid pattern with a circular cutout effect. The code uses `d3.select`, `d3.range`, and the `.join()` pattern to generate the rectangles, while masks are constructed with SVG `mask` elements. The visualization fills the entire browser window and is rendered entirely through SVG attributes.

Mmkarnam.mahendra@gmail.com

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It uses `select` to create an SVG canvas and `range` to generate data for drawing a grid: horizontal and vertical rectangles are appended with `.join('rect')`. Two SVG mask elements (`circle-mask` and `circle-mask-2`) reveal the grid through a central circular opening, with one mask inverting the other to create a contrasting effect. The visualization runs at full browser window size using D3 version 6.6.1.

JJeppeOEM

90% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Bbtlhgboy@icloud.com

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97

89% match