Skip to main content
SimilarExport ZIP
100%

Fork of (2) Episode 3: Sol LeWitt in Vanilla JS - Vertical Variant

✓ Published0🌍 Public
GGautam Doshi
Last edited Jul 19, 2024
Created on Jul 19, 2024

This example reproduces a Sol LeWitt wall drawing using two circular SVG masks to create an interplay of horizontal and vertical black lines. One mask reveals horizontal stripes inside a centered circle, while a second, inverted mask exposes vertical stripes outside that same circle. The artwork is generated entirely with vanilla JavaScript, creating over 200 SVG `rect` elements at fixed intervals, without any external libraries. The page fills the browser window, and the geometric composition is built purely from procedural code.

AI-generated description

A reporoduction of a Sol LeWitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol Lewitt Reproduction Vertical

This example reproduces Sol LeWitt’s vertical wall drawing using pure SVG and JavaScript. It creates a circular mask and its inverse, then renders 100 horizontal and 100 vertical stripes that alternate visibility through those masks. The result is a grid of intersecting lines with a circular void in the center, generated entirely through DOM manipulation and SVG `mask` elements.

Pphamdiem280496@gmail.com
89% match
Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This visualization shows a grid of vertical, randomly colored rectangles overlaid with a large white circle in the center. A second grid of horizontal rectangles is masked to appear only inside that central circular region. The piece is built by constructing SVG elements directly, including both vertical and horizontal rectangles, and using a mask with a circle to clip the horizontal grid to the circular area. The code uses the Document API to create SVG elements and applies inline styles for fill colors and geometry.

NNita
89% match
Loading thumbnail…

Fork of Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This example generates a colorful, generative art piece inspired by Sol LeWitt, built entirely with vanilla JavaScript and the SVG API. It renders a full-screen grid of randomly colored vertical rectangles, then overlays a large white circle in the center. A second grid of horizontal rectangles is clipped to that same circular shape using an SVG `<mask>`, creating a layered, intersecting pattern. All shapes are created dynamically via `document.createElementNS`, with colors assigned through randomized RGB values.

MMaras13
89% match
Loading thumbnail…

Fork of Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This piece, presented in a web browser, shows two overlapping, colorful compositions of abstract vertical and horizontal stripes. The rendering is built with the vanilla JavaScript API for SVG, using programmatically created shapes. A white circle obscures the center of the vertical stripe pattern, while a separate set of horizontal stripes is clipped to a circular mask, creating the appearance of a layered, circular cutout. Each rectangle’s fill color is randomly generated, producing a dynamic, multicolored grid.

SshanLU999
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using only JavaScript and the SVG API. A central circular mask reveals a grid of horizontal black lines in the center of the viewport, while a second inverted mask allows vertical black lines to appear only outside the same circle, creating a striking contrast. The code dynamically creates all SVG elements—including masks, rectangles, and circles—based on the browser window dimensions, generating 100 horizontal and 100 vertical stripes that intersect in a pattern defined by the two masks.

Mmagswo
88% match
Loading thumbnail…

Fork of Sol Lewitt Vertical

This example reproduces Sol LeWitt’s *Vertical* art piece using two SVG masks to interleave horizontal and vertical black bars. A circular mask reveals the horizontal bars inside the circle while hiding them outside, and a complementary mask reveals the vertical bars only outside the circle. The code builds the SVG directly with the Document Object Model (DOM) API, creating 100 rectangles at 20-pixel intervals across a 600×500 canvas. The result is a clean, geometric pattern that contrasts dense line grids with an empty circular void.

FFrancisco Ibelles
88% match
Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an abstract, animated composition inspired by Sol LeWitt’s geometric wall drawings. A grid of 200 vertical rectangles, each filled with a random bright RGB color, extends across the full window height, with each rectangle independently bobbing upward in a looping translateY animation. Centered in the viewport, a white circle is drawn, and a separate mask (defined via SVG `mask` and `defs`) is applied to a grid of horizontal rectangles, so that only the circular area reveals the second set of stripes. The sketch uses only vanilla JavaScript and the SVG DOM API, without any external libraries, to assemble and animate the shapes.

JJaga-droid
88% match
Loading thumbnail…

Fork of Fork of Fork of Sol Levitt Vertical

This generative art piece recreates a Sol LeWitt-inspired wall drawing using only SVG shapes. It shows a grid of horizontal and vertical black stripes confined to a central circular area. The code builds two SVG masks: one cuts a hole in a black circle, while the other inverts it, so overlapping stripes are visible only within the ring. The stripes are generated with JavaScript loops, each rect targeted to a specific mask via `url(#circle-mask)`. The artwork adapts to the browser window dimensions.

SSimon Krukowski
87% match