Sol LeWitt Reproduction

100%

Sol LeWitt Reproduction

✓ Published0🌍 Public

Last edited Nov 30, 2023

Created on Nov 22, 2023

This example reproduces a Sol LeWitt-inspired drawing using only browser-native SVG and JavaScript. It shows a field of thin blue horizontal lines covering the full viewport, overlaid with a row of concentric white circles, and one fully filled white circle at the center. The code creates these shapes imperatively via the SVG DOM API, appending `rect` and `circle` elements inside a loop. It uses `document.createElementNS` for SVG namespace creation and `setAttribute` for geometry, with dimensions tied to `window.innerWidth` and `innerHeight`.

AI-generated description

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Sol LeWitt reproductions

This example uses JavaScript and the SVG API to generate a geometric piece inspired by Sol LeWitt. It shows a grid of black vertical bars overlaid with repeating diagonal patterns of black and white circles, creating a sense of systematic repetition. The code creates SVG elements directly with `document.createElementNS`, setting attributes to position 100 rectangles and multiple circle rings across the full viewport. No external libraries are used; the rendering is purely procedural, and the visualization is static, with no interactivity or data input.

Llieta96

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

88% match

Loading thumbnail…

Sol LeWitt Reproduction - Vertical Lines

This example reproduces a Sol LeWitt drawing using JavaScript and the SVG API. It creates a full-screen SVG canvas and draws 100 vertical black rectangles, each 10 pixels wide and spaced 20 pixels apart, with no horizontal variation. The code uses `document.createElementNS` and `setAttribute` to generate the rectangles dynamically. The piece directly references LeWitt's instruction-based art, presenting a simple, systematic grid of vertical lines that fills the entire browser window, adapting to its dimensions.

Aajoua

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

88% match

Loading thumbnail…

Sol LeWitt Reproduction with JS

This example reproduces a Sol LeWitt geometric art piece using only native browser APIs. It displays a grid of horizontal and vertical rectangles intersecting around a central circular void, created with SVG masks. The code uses `document.createElementNS` to build SVG elements and applies two masks: a white circle on black for the horizontal bars and an inverted circle for the vertical bars. The 60 rectangles in each direction are generated programmatically with fixed 20-pixel spacing.

MMofizur Rahman

88% match

Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt-inspired geometric drawing using SVG. A series of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart, render across the full screen width. A circular mask centered on the viewport clips these rectangles, revealing only the lines inside the circle. The visualization uses plain JavaScript to create SVG elements dynamically, with no external libraries, and responds to the browser window’s dimensions for sizing.

Ttonkocorp

87% match