Episode 3: Sol LeWitt in Vanilla JavaScript

100%

Episode 3: Sol LeWitt in Vanilla JavaScript

✓ Published2🌍 Public

Last edited Mar 22, 2021

Created on Mar 22, 2021

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.

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…

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

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

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

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

93% match

Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

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.

Ccssergio

90% match

Loading thumbnail…

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

This visualization generates a grid of concentric circles using the SVG API, created dynamically with `document.createElementNS`. The code iterates over a 5100-by-5100 loop, placing each circle at a fixed 50-pixel interval, with a radius of 50 units, a black stroke, and no fill. The circles are appended directly to the SVG element, which is styled to fill the entire browser window. The example references Sol LeWitt’s geometric wall drawings, reproducing a systematic, repetitive pattern through vanilla JavaScript without any external libraries. The script includes commented-out alternatives for colored rectangles and masked grids, highlighting a modular approach to generative art.

NNita

89% match

Loading thumbnail…

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

A grid of 10,000 unfilled black-outlined circles, each with a radius of 10 pixels, is arranged in a 100-by-100 pattern across the full browser window. The circles are rendered as SVG elements created dynamically with vanilla JavaScript, using `document.createElementNS` and setting `cx`, `cy`, `r`, `stroke`, and `fill` style properties. The code includes commented-out variations featuring random colored fills and masked rectangular grids, but the active visualization strictly displays the uniform circle grid. The piece references Sol LeWitt’s generative art style, with the rendering approach visible through direct SVG manipulation rather than any external library.

NNita

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

88% match