Sol Lewitt Repro HOR

100%

Sol Lewitt Repro HOR

✓ Published0🌍 Public

Last edited Dec 30, 2025

Created on Dec 30, 2025

This example renders a generative art piece inspired by Sol LeWitt’s geometric wall drawings. It displays one hundred horizontal striped rectangles across the full screen, clipped into a circular window at the center of the viewport. The code uses raw SVG DOM manipulation with `createElementNS` to build the elements, and applies an SVG `mask` with a `circle` to constrain the visible area. Although it loads D3 v7, the visualization relies only on native SVG features, not on any D3-specific functions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Repro

This example reproduces a Sol LeWitt art piece by generating a series of vertical rectangles across the full screen. It creates 100 SVG rectangles, each 10 pixels wide, positioned at increasing x-coordinates, using plain JavaScript DOM manipulation to construct the SVG elements. The visualization uses D3 v7 only to load the library, while all rendering is done through native SVG APIs like `createElementNS` and `setAttribute`. The artwork fills the browser window dynamically using `window.innerWidth` and `window.innerHeight`.

Jjustinenns@hotmail.com

92% match

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js reproduction of a Sol LeWitt piece covers the viewport with two sets of striped rectangles—horizontal bands and vertical bands—that intersect at a central circular area. The rendering uses SVG masks (`circle-mask` and `rect-mask`) to selectively reveal or hide stripes, creating the illusion of a circular window through the grid. The code draws 100 rects in each orientation, layering them with opposite mask fills to alternate visibility. This generative artwork leverages D3's `select`, `range`, and `join` API to build the SVG structure dynamically, scaling to the full window size.

DDilara Bozkurt

89% match

Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

DDonald Bagwell

89% match

Loading thumbnail…

Sol LeWitt reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript to generate SVG elements dynamically. It displays a composition of horizontal and vertical striped rectangles that form a distinct circular pattern at the center of the viewport. The rendering uses two SVG masks, `inner-circle-mask` and `outer-circle-mask`, to control the visibility of the 100 horizontal and 100 vertical `<rect>` elements, which are sized relative to the window’s dimensions. The code relies on basic SVG APIs such as `createElementNS`, `setAttribute`, and `appendChild` to construct the artwork.

AAngela Kochoska

89% match

Loading thumbnail…

Sol LeWitt Reproduction D3

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.

Gguththered

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201

89% match

Loading thumbnail…

Sol LeWitt Repro w/ D3 - different method

This example reproduces a Sol LeWitt-inspired wall drawing by filling the screen with horizontal and vertical striped rectangles. It creates 100 rows and 100 columns, each 10 pixels thick, and layers them using two SVG masks to reveal a circular cutout where the orientations intersect. The visualization uses D3 v7’s `select`, `range`, and `join` to append SVG elements, while separate mask definitions with black and white fills control visibility. Rendering is fully SVG-based, with window dimensions driving the canvas size.

Hhelloelectro

88% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com

88% match