Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
SShashi Kumar
Last edited Aug 20, 2023
Created on Aug 20, 2023

This piece reproduces a Sol LeWitt wall drawing using D3.js to create a grid of horizontal and vertical lines. A circular mask reveals the intersection of the two line sets, with a white circle in the first mask and an inverted circle in the second, producing a clear central focus. The SVG rendering is generated procedurally using `d3.select`, `d3.range`, and the `join` API to append 100 rectangles in each direction, sized relative to the window dimensions. The artwork dynamically adapts to the viewport, with the mask radius fixed at 200 pixels.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder
94% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical black lines layered over the full viewport. The lines are clipped by two circular masks centered on the screen, creating a crosshatched pattern that fades into blank space beyond the circle boundaries. The code uses D3 selections and the `join` pattern to append SVG `rect` elements, with `mask` elements defining the visible regions via white and black circles. The artwork is rendered entirely in SVG using D3 v7.

Kkwambokar
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This piece uses SVG to display horizontal and vertical lines in a grid across the entire screen, generating a striped texture rather than a literal reproduction of the Sol LeWitt artwork. Each line segment is drawn as a thin rectangle, with 100 rows and 100 columns created via d3’s range and join methods. Two circular masks are applied to the grid: one with a central white hole on a black background, and another with an inverted pattern, producing a lensing or spotlight effect. The piece pairs D3’s SVG API with custom mask elements to create a geometric, interactive-looking visual.

Kkhalil-ryu
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece by layering two alternating sets of mask-applied stripes on an SVG canvas. Horizontally and vertically oriented rectangles are drawn using D3’s `select`, `append`, and `join` APIs, with each set filtered through a circular mask to reveal the intersecting bands within a central circle. The second mask inverts the first, creating a positive/negative interplay of the grid. The code relies on D3 for DOM manipulation and uses window dimensions to scale the piece to the full browser viewport.

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

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado
93% match