Sol LeWitt Reproduction D3

100%

Sol LeWitt Reproduction D3

✓ Published0🌍 Public

Last edited Jun 10, 2022

Created on Jun 10, 2022

This example reproduces a Sol LeWitt geometric art piece using only SVG and DOM manipulation, without any external libraries. It displays a grid of 100 horizontal and 100 vertical black rectangles on a full-screen canvas. Two circular masks—one with a black background and white circle, the other inverted—are applied to the horizontal and vertical strips respectively, creating an intersecting circular void in the center. The code uses `createElementNS` to construct SVG elements and `setAttribute` with `mask` URLs to achieve the layered effect.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction AG

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles. The code creates two circular masks, one with a black background and white circle, the other inverted, then applies them to 100 horizontal and 100 vertical bars. The result is a grid of intersecting lines visible only within the circular regions, mimicking the geometric precision of LeWitt’s conceptual art. It uses raw SVG DOM manipulation via `document.createElementNS` and mask attributes, with no external libraries.

Gguththered

93% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing entirely with SVG shapes, using two circular masks to create a layered grid of horizontal and vertical lines. A black-and-white mask limits the first set of 100 horizontal rects to a centered circle, while an inverted mask applies 100 vertical rects to the surrounding area. The code builds the scene dynamically via the DOM API (`createElementNS`, `setAttribute`), populating the SVG canvas across the full window size. No external libraries are used, relying purely on native SVG masking and rectangle elements.

Iinnocent thomas

92% match

Loading thumbnail…

Sol LeWitt repro with D3

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It displays a grid of horizontal and vertical lines that are selectively masked by two overlapping circular regions, creating a geometric pattern of intersecting lines with circular cutouts. The code uses raw DOM manipulation with `document.createElementNS` to construct SVG elements, defining two `mask` elements with `rect` and `circle` shapes to control which parts of the line grid are visible. The rendering is resolution-independent, adapting to the full browser window dimensions.

Ddsims2157

91% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

AAndre J Denais

91% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It shows a grid of horizontal and vertical stripes, masked to reveal a central circular area where only horizontal lines appear, surrounded by vertical lines. The code uses raw Document Object Model (DOM) methods such as `document.createElementNS` and `setAttribute` to construct the SVG, with two mask definitions (`circle-mask` and `circle-mask-2`) controlling visibility. No external libraries are used; the rendering relies purely on SVG rectangles and masks in the browser.

PPareel Amre

91% match

Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

PPrince Kumar

91% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

IIndranil Biswas

91% match

Loading thumbnail…

Sol LeWitt Reproduction 2

This reproduction of a Sol LeWitt artwork uses an SVG generated entirely through the Document Object Model (DOM) API. It shows a grid of horizontal and vertical stripes that are selectively revealed through two circular masks centered on the canvas. The first mask applies a black circle to create a cutout in the horizontal stripes, while the second uses a white circle to overlay vertical stripes in the same region. The code builds elements dynamically, setting width and height to the full viewport, and employs the `createElementNS` method to construct SVG nodes for masks, rectangles, and circles.

Aandu006@gmail.com

91% match