Fork of Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

100%

Fork of Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

✓ Published0🌍 Public

Last edited Aug 6, 2025

Created on Aug 6, 2025

Forked from Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece displays a generative animation inspired by Sol LeWitt, in which 200 randomly colored vertical bars rise and fall across the full screen height. A large white circle at the center masks a series of black horizontal bars. Built with vanilla JavaScript and SVG, the code creates animations via the `rect.animate()` API, uses `document.createElementNS` for SVG elements, and generates random RGB colors using the `Math.random` function.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3 Nita's Piece

This piece generates an abstract animated composition in the spirit of Sol LeWitt using vanilla JavaScript and the SVG API. A vertical grid of 200 randomly colored rectangles spans the full window height and animates upward infinitely with randomized durations. A large white circle is drawn over the center of these moving bars. A second horizontal grid of rectangles is then rendered across the entire canvas, but it is clipped by a mask defined with a circle element, revealing a circular window that shows the white shape and the animated color field below.

Ddr-acc

91% match

Loading thumbnail…

Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

An animated SVG composition generates a grid of two hundred colorful vertical rectangles, each with a randomized fill color and a looping vertical translation animation that shifts it upward by 300 pixels over a random duration. A white circle is drawn at the center of the screen, while a second grid of horizontal rectangles is masked using a circle element within an SVG `<mask>` definition, revealing the horizontal stripes only inside the circular area. The code uses vanilla JavaScript with the Web Animations API (`element.animate`) and dynamically creates SVG elements via `createElementNS`.

Rraturi22@gmail.com

91% match

Loading thumbnail…

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

This example generates an animated Sol LeWitt-inspired composition using SVG and the Web Animations API. Two overlapping visual layers are present: a grid of tall, vertically oriented rectangles with random colors and upward-floating motion, and a second grid of horizontal rectangles clipped by a circular mask. A white circle is drawn at the center to overlap the first grid. The piece combines generative randomness in color and animation timing with geometric order, rendering entirely in vanilla JavaScript without external libraries.

Ssirenajbpearl@gmail.com

88% match

Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an animated SVG composition inspired by Sol LeWitt. Two overlapping grids of rectangles—vertical bars and horizontal stripes—interact with a central white circle. The vertical bars are randomly colored and drift upward via CSS-style animations applied through the SVG `animate` method. A mask restricts the horizontal grid to a circular region, creating a lens effect. Built with vanilla JavaScript and DOM manipulation, it uses no external libraries.

NNita

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

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

86% match

Loading thumbnail…

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

This example generates a grid of vertical SVG rectangles filled with random RGB colors, layered with a white circle and a horizontally striped mask-defined circle overlay. It uses the Web Animations API to apply infinite, randomized-duration animations to each rectangle. The piece is inspired by Sol LeWitt’s generative art, created in vanilla JavaScript with dynamic SVG creation via `document.createElementNS`.

JJaga-droid

85% match

Loading thumbnail…

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

This example shows a generative art piece inspired by Sol LeWitt, featuring a grid of animated vertical rectangles that shift downward while a white circle overlays the center. A second set of horizontal rectangles is clipped by a circular mask, creating a layered geometric composition. The animation uses the Web Animations API’s `element.animate()` with random durations and translations, while SVG elements are created dynamically via `document.createElementNS`. Random RGB fills are assigned to each rectangle, and the mask is defined using SVG `<mask>` and `<circle>` elements.

DDing

85% match