Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Sol LeWitt Reproduction with D3 Classes

✓ Published0🌍 Public
GGbemiga Atolagbe
Last edited Jun 12, 2024
Created on Jun 12, 2024

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.

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 reproduces a Sol LeWitt art piece using D3 v6, rendering a grid of horizontal and vertical stripes masked by two concentric circles. The visualization shows a geometric pattern of alternating line thicknesses, with the circular masks creating a layered negative-space effect. The code uses `d3.select`, `d3.range`, and `join` to generate SVG rectangles, while SVG `<mask>` elements with `circle` and `rect` shapes define the visible regions. All rendering occurs client-side in SVG, with dimensions set to the full window size.

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

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

SSamuele Greco
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

TTobi Olabode
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3 version 6. It displays a grid of alternating horizontal and vertical black rectangles, masked to reveal a central white circle against a dark background, creating a cross-hatched circular motif. The code uses `d3.select`, `range`, and data joins (`.join()`) to generate SVG `<rect>` elements dynamically. Two SVG masks (`circle-mask` and `circle-mask-2`) with white and black circles, respectively, control which parts of the overlapping stroke pattern remain visible. The rendering is entirely SVG-based, with dimensions set to the full browser window.

SSinasirousnejad
93% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
93% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using overlapping horizontal and vertical stripes that intersect within two circular masks. It renders 100 thin rectangles per direction across the full viewport, with the first mask revealing the horizontal set as a white circle on black, and the second mask revealing the vertical set as a black circle on white. Built with D3 v6, the code uses `select`, `range`, and `join` to generate SVG `<rect>` elements, while mask definitions control visibility. The result shows two concentric circular zones of striped patterns against a plain background.

Mmarc.chatton@outlook.com
93% match