Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
MMinh Nguyen
Last edited Jun 11, 2021
Created on Jun 11, 2021

A dense grid of 10,000 SVG circles animates in a generative art piece inspired by Sol LeWitt. The circles, each with a random stroke color and no fill, pulse between 0 and 20 pixels in radius over a 20-second cycle, creating a flowing, rhythmic field of concentric outlines. The animation is driven by CSS `@keyframes` applied to the `r` property, while the grid itself is generated with vanilla JavaScript using the SVG API to create and position elements.

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

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

This example uses vanilla JavaScript and the SVG API to generate a grid of 100 by 100 circles, each with a random stroke color and no fill. The circles are spaced every 10 pixels across the full browser window, producing a dense, colorful pattern inspired by Sol LeWitt’s geometric artworks. The code creates SVG circle elements dynamically using `createElementNS` and sets their positions and stroke colors randomly. While the title mentions "more circles," the visible output is a static, uniform grid without animation or additional layers.

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