Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Bbtlhgboy@icloud.com
Last edited Jan 24, 2024
Created on Jan 24, 2024

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.

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 example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com
95% 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
94% 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
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction in D3 Part 2

This visualization reproduces a Sol LeWitt drawing using two sets of overlapping horizontal and vertical bands that create a crosshatch pattern. D3 version 7 is used via the `select` and `range` functions to generate SVG rectangles, while two distinct SVG masks (`circle-mask` and `circle-mask2`) invert their visibility to reveal a circular window at the center. The first mask applies a black background with a white circle, while the second uses white with a black circle, producing complementary cutout effects against the full screen canvas.

BBrady Atomos
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
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 Fork of Sol LeWitt Reproduction with D3 Classes

This example reproduces a Sol LeWitt wall drawing using SVG and D3.js v6.6.1. It displays a grid of horizontal and vertical stripes, masked by two overlapping circles to create a pattern of contrasting line directions. The code uses D3’s `select`, `range`, `.append`, `.attr`, `.data`, and `.join` APIs to construct the SVG elements directly. Two SVG masks (`circle-mask` and `circle-mask-2`) define the circular visibility regions, with the vertical lines visible inside the first circle and the horizontal lines visible inside the second. The drawing fills the entire browser window.

GGbemiga Atolagbe
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, drawing 100 horizontal and vertical striped rectangles across the full viewport. The code applies two SVG masks—a circle-mask and a circle-mask-2—to show the grid pattern only within circular regions at the center of the canvas, while the outer areas remain blank. Built with D3’s `select`, `range`, and chained `join('rect')` operations, it renders with SVG and uses the `append('mask')` method to create the overlapping circular reveals.

Sshayan yadegaridehkordi
93% match