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

100%

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

✓ Published3🌍 Public

Last edited Mar 27, 2021

Created on Mar 27, 2021

Forked from Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of Squares

This example generates a colorful grid of randomly colored squares, inspired by the geometric abstraction of Sol LeWitt. It creates 100 by 100 small SVG rectangles, each with a random RGB fill, filling the entire viewport. The code uses Vanilla JavaScript to programmatically create and append SVG elements via the Document Object Model (DOM), setting each rectangle’s width, height, x, and y positions to 10 pixels. The result is a static, pixel-like mosaic that showcases generative art through simple, repetitive loops and random color selection.

AI-generated description

Inspiration Curran's live streaming

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 : Mar 27,2021 : group of Squares

This visualization generates a 10×10 grid of randomly colored squares, each 10 pixels in size, rendered across the browser window using SVG elements created via the `document.createElementNS` method. The code sets the fill color for each rectangle using the `rgb()` function with values produced by `Math.random()`, resulting in a vibrant, unpredictable pattern. The rendering approach relies entirely on vanilla JavaScript and the SVG API, without any external libraries, and does not include animation or interactive behavior beyond the static grid display.

NNita

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

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

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

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

A grid of 10,000 circles animates in SVG, with each circle's radius pulsing between 0 and 20 pixels over a 20-second cycle while strokes display random RGB colors. The vanilla JavaScript creates circles dynamically using `document.createElementNS` and applies CSS keyframe animations to alter the `r` attribute. The piece references Sol LeWitt's generative grid aesthetics, using randomized stroke colors against unfilled shapes to produce a shifting, cellular pattern across the full browser viewport.

NNita

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

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

88% match