Fork of group of circles, more circles

100%

Fork of group of circles, more circles

✓ Published0🌍 Public

Last edited Dec 1, 2022

Created on Dec 1, 2022

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

This visualization presents a grid of 10,000 unfilled black circles arranged in a 100-by-100 array across the full browser window. The code builds the artwork using the SVG namespace with the `document.createElementNS` API, setting fixed `cx`, `cy`, and `r` attributes for each circle. It demonstrates a generative approach inspired by Sol LeWitt, creating a systematic, geometric pattern that fills the viewport without interaction or animation.

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…

W3 circles

This example shows a grid of 10,000 empty circles arranged in a staggered pattern across the full browser window. The rendering approach creates a generative art piece in the spirit of Sol LeWitt, using raw SVG elements created via the Document Object Model API. Each circle is styled programmatically with a thin black stroke and no fill, with positions calculated in a nested loop that offsets columns and rows. The code uses `document.createElementNS` with the W3 SVG namespace and sets circle attributes like `cx`, `cy`, and `r` through inline style properties.

AAlenka Guček

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

83% match

Loading thumbnail…

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

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.

MMinh Nguyen

81% match

Loading thumbnail…

Fork of Fork of Sol Lewwit 3

This interactive SVG artwork creates a grid of vertical and horizontal lines, with a circular void in the center formed by masking. The visualization uses SVG masks (`circle-mask` and `circle-mask2`) to show vertical lines inside a white circle and horizontal lines outside it, resulting in a dynamic, layered composition. Built with vanilla JavaScript using `document.createElementNS`, it generates 100 rectangles per axis, with the central circle positioned at the viewport center. The design adapts to the browser window size, demonstrating a creative use of SVG masking for generative art.

PPeiyang Li

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

78% match

Loading thumbnail…

Fork of first iteration on site

This example displays a row of twenty circles that bob vertically in a continuous sine-wave pattern across the browser window. The animation is driven by a timer that updates the circle positions every 10 milliseconds, using D3’s `select`, `range`, and `.join()` API to bind data to SVG circle elements and update their `cx` and `cy` attributes. The visualization is rendered as an SVG, sized to the full window dimensions.

JJesper Martinsson

78% match

Loading thumbnail…

Fork of SVG Fundamental

This example shows a small set of circles arranged in a grid on an SVG canvas, each filled with a different color. The circles are defined directly in the HTML markup without any JavaScript or styling logic. It uses SVG elements such as `<circle>` and the `cx`, `cy`, `r`, and `fill` attributes to control position, radius, and color. The rendering approach is static, with no interaction or data binding.

AAlexHraven

78% match

Loading thumbnail…

Fork of Fork of SVG Fundamental

This example displays four circles arranged in a grid on a 400 by 400 SVG canvas, each filled with a different color: black, red, yellow, and magenta. It demonstrates fundamental SVG shape rendering and styling through inline attributes such as `cx`, `cy`, `r`, and `fill`. The code uses plain HTML and static SVG markup without JavaScript or external libraries, serving as a minimal starting point for understanding vector graphics in a web page.

AAlexHraven

78% match