Sol LeWitt Reproduction in D3

100%

Sol LeWitt Reproduction in D3

✓ Published1🌍 Public

Last edited Aug 5, 2023

Created on Aug 5, 2023

This example reproduces a Sol LeWITT-style drawing in D3, showing a grid of horizontal and vertical stripes that intersect to form a ring-like pattern. The visualization uses two sets of 100 SVG rectangles, each masked to reveal or hide specific areas, creating a dynamic optical effect. Built with D3.js version 7, it leverages `select`, `range`, and chained `.attr()` calls to generate the geometry, while SVG mask elements define the circular cutouts that expose the alternating stripe layers. The code renders directly to the browser window using the SVG rendering approach.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt artwork generates a grid of 100 horizontal and 100 vertical SVG rectangles, each 10 pixels thick, which are masked by two opposing circular shapes. Using the `select` and `range` APIs from d3, the code appends SVG elements and utilizes two masks—one hidden by a black rectangle with a white circle, the other with inverted colors—to create an intersecting ring pattern. The final visualization, sized to the full browser window, forms a crosshatched composition with circular cutouts, demonstrating D3's declarative `.join` method for efficient element creation.

Jjmetzg11alpine

94% match

Loading thumbnail…

Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It renders a grid of horizontal and vertical SVG rectangles across the full window, with each set masked to reveal intersecting circular cutouts at the center. The visualization relies on d3.select, d3.range, and SVG mask elements to layer two sets of stripes, alternating black and white fills within the circles. The result is a clean, minimal pattern that mimics the artist’s systematic approach to drawing, with no data input beyond the generated grid dimensions.

Mmaciekawsq@gmail.com

94% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li

93% match

Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Uulrichzhan

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Ccardoza-IPH

93% 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

93% match

Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt drawing using D3.js, displaying a grid of alternating horizontal and vertical black lines that form a circular pattern. It uses SVG masks with two complementary circular cutouts to create the intersecting line effect. The code leverages D3’s `select`, `range`, and `join` APIs to generate and bind 48 rectangles in each orientation, with each set masked to reveal only the portion inside or outside the circle.

Ttverdone

92% match