SOL Lewitt Final Stage

100%

SOL Lewitt Final Stage

✓ Published1🌍 Public

Last edited Dec 10, 2023

Created on Dec 10, 2023

This example renders a generative pattern inspired by Sol LeWitt's wall drawings. It displays a dense grid of horizontal and vertical hairlines, with a circular region in the center left uncovered, effectively creating a negative-space circle. The artwork uses JavaScript to dynamically create SVG elements, employing two SVG masks—`circle-mask` and the inverted `circle-mask-2`—to control which rectangles are visible. The code builds 100 horizontal and 100 vertical `<rect>` elements directly, without any external libraries, to form the final static composition.

AI-generated description

A bare minimum HTML page this is the beginning of the SOL Lewitt variable and drawings.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using pure JavaScript and SVG APIs. It shows a grid of horizontal and vertical striped rectangles overlaid with two circular masks, creating a composition of intersecting lines that fade into a central circle. The code builds SVG elements dynamically via `document.createElementNS`, applying a black-to-white mask and an inverted white-to-black mask to reveal alternating line directions. One hundred horizontal strips and one hundred vertical strips are generated in loops, with the masks controlling visibility to form the final geometric pattern.

AAndre J Denais

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

86% match

Loading thumbnail…

Sol Lewitt

This generative visualization creates a geometric pattern inspired by Sol LeWitt’s wall drawings, using only SVG and JavaScript without external libraries. It overlays two sets of 100 rectangular stripes—vertical and horizontal—onto a full-screen canvas. A circular mask isolates a centered ring where horizontal stripes are inverted, while a second mask carves a solid white circle ring from the vertical stripes. The result is a repeating grid whose central region shifts contrast, producing an optical interplay of lines and negative space.

Kkrunalpalande

86% match

Loading thumbnail…

Simple Sol Lewitt

This example generates a generative art composition inspired by Sol LeWitt using raw SVG and JavaScript. It draws 100 vertical and 100 horizontal stripes across the full viewport, using circular masks to create a central ring pattern where the two sets of stripes intersect. The code constructs SVG elements dynamically via the DOM API, applying the `mask` attribute with two different circle-based masks defined in `circle-mask` and `circle-mask2`. No external libraries are used; the rendering relies purely on native SVG primitives.

Aahavagowtham

86% match

Loading thumbnail…

Sol LeWitt Reproduction Final

This interactive HTML page reproduces Sol LeWitt's geometric art using dynamically generated SVG elements. It displays a grid of horizontal and vertical black lines, which are masked to reveal a central circular area where the lines are visible. The piece uses two SVG masks, `circle-mask` and `circle-mask-2`, to create the contrast. The first mask shows only the horizontal lines inside a 200-pixel radius circle, while the second mask reveals vertical lines in the surrounding area. The code utilizes the Document API to create the SVG structure and elements programmatically in JavaScript.

Kkwambokar

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

86% match

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-style drawing using SVG and JavaScript. It displays a grid of vertical and horizontal stripes that are visible only within a central circle, creating an intersection pattern. The code uses the Document Object Model (DOM) to create SVG elements, including masks, rectangles, and circles. Two circular masks with contrasting fills control where each set of stripes is revealed, demonstrating a generative art technique with a clean, geometric output.

VVincent Leduc

86% match

Loading thumbnail…

Sol Lewitt Reproduction javascript in html

This example reproduces a Sol LeWitt wall drawing using JavaScript and dynamically generated SVG. It shows a grid of horizontal and vertical stripes, with a circular area in the center where the pattern is inverted due to two overlapping SVG masks. The code creates the SVG namespace via `document.createElementNS` and builds the composition procedurally. The first mask hides the vertical lines within a 200-pixel radius circle, while the second mask hides the horizontal lines in that same region. The rendering relies entirely on core SVG and JavaScript APIs, with no external libraries.

GGullyPlook

86% match