Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssuzzymeetstranger@gmail.com
Last edited Oct 11, 2024
Created on Oct 11, 2024

A grid of 200 vertical rectangles fills the screen, each with a random fill color and an independent CSS animation that translates it upward, creating a shifting, colorful backdrop. A circular mask clips a second set of horizontal rectangles to a white circle centered in the viewport. The piece uses plain JavaScript with the SVG DOM API and the Web Animations API (`element.animate`) for motion, inspired by Sol LeWitt’s generative geometric forms.

AI-generated description

Inspiration from Curran's live streaming

Started from scratch. Lot of research helps.

Exercise options:

Reproduce any Sol LeWitt piece.

Create generative art in the spirit of Sol LeWitt.

Add animation to what we’ve created (e.g. rotation).

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A grid of 200 vertical rectangles fills the screen, each with a random fill color and an independent CSS animation that translates it upward, creating a shifting, colorful backdrop. A circular mask clips a second set of horizontal rectangles to a white circle centered in the viewport. The piece uses plain JavaScript with the SVG DOM API and the Web Animations API (`element.animate`) for motion, inspired by Sol LeWitt’s generative geometric forms.

Ssuzzymeetstranger@gmail.com
100% 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
93% 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
93% 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
92% 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
92% match
Loading thumbnail…

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

This example generates a dynamic grid of vertical rectangles, each filled with a randomly selected RGB color, and animates them by translating them vertically along the y-axis. A white circle is placed at the center of the canvas, and a mask is defined with a circular shape to clip a second set of horizontal rectangles, creating a patterned circle. The code uses the SVG `rect` and `circle` elements, along with the `mask` and `defs` elements, to apply the clipping. The animation is driven by calling the `animate` method on the rectangle elements with keyframes and timing options.

Ssenghok789@gmail.com
91% 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
90% match
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
90% match