Skip to main content
SimilarExport ZIP
100%

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

✓ Published1🌍 Public
Ccssergio
Last edited May 23, 2022
Created on May 23, 2022

This example reproduces a Sol LeWitt-inspired art piece as an animated SVG composition. It shows a grid of thin vertical rectangles with randomized colors and staggered upward motion, overlaid with a large white circle. A second circle acts as a mask, revealing a hidden layer of horizontal rectangles beneath. The piece is built entirely with Vanilla JavaScript, creating SVG elements dynamically and animating them with the Web Animations API’s `animate()` method, using randomized durations and infinite iterations.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 6

This interactive SVG artwork reproduces a Sol LeWitt-inspired geometric composition using vanilla JavaScript and the SVG DOM API. It displays a grid of vertical rectangles overlaid with three white circles, plus a second grid of horizontal rectangles masked by three additional circles via SVG `<mask>` elements. The code generates 200 rectangles per grid programmatically, sizes elements relative to the window dimensions, and calls the Web Animations API’s `animate()` method with empty keyframes, preparing the shapes for potential motion while no visible animation occurs.

NNita
93% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This example renders a generative SVG composition inspired by Sol LeWitt, using vanilla JavaScript and the SVG DOM API. It displays a field of randomly colored vertical rectangles, with a white circle centered over them. A second set of randomly colored horizontal rectangles is clipped by a circular mask, creating a crosshatched disk. The code constructs all shapes dynamically, assigning random fill colors and using CSS transitions to animate the vertical rectangles' height on hover.

NNita
92% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 4

This example displays a full-screen generative composition of vertical and horizontal color grids overlaying a central white circle. Built with vanilla JavaScript and the SVG API, it creates 200 animated vertical rectangles that jitter horizontally behind a masked grid of horizontal bars. The code uses `document.createElementNS` for SVG elements, CSS transforms for the infinite animation loop, and a mask to confine the horizontal grid within a circular boundary.

NNita
91% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of circles, more circles

This visualization reproduces a Sol LeWitt art piece as a dense 100×100 grid of randomly colored 10-pixel squares, filling the entire browser window. The code uses vanilla JavaScript to create SVG elements via the DOM API, setting each rectangle’s fill to a random RGB value. Though commented-out sections hint at alternative circle-based or masked-grid variations, the active code renders only the colorful square grid, with no interaction or animation.

Ccssergio
91% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 5

A colorful grid of thin vertical rectangles fills the screen, each one continuously rotating 360 degrees via the Web Animations API’s `Element.animate()`. A large white circle overlays the center, while a second set of horizontal rectangles, masked by an SVG `mask` containing a circle, reveals only inside that circular region. The piece generates random RGB fill colors for each vertical bar and uses a fixed count of 200 elements, with SVG attributes and styles set imperatively through JavaScript. The animation runs infinitely with a 2000-millisecond duration per rotation.

NNita
91% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt-inspired geometric composition using vanilla JavaScript and SVG. It displays a grid of vertical rectangles spanning the full window height, overlaid with a white circle at the center that masks a second layer of horizontal rectangles, creating a crosshatch pattern within the circular boundary. The code constructs SVG elements programmatically via `createElementNS` and manipulates styles for positioning and masking, using the `mask` element with a circle to clip the inner grid.

NNita
90% 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
89% match