Skip to main content
SimilarExport ZIP
100%

W3 circles

✓ Published0🌍 Public
AAlenka Guček
Last edited Apr 1, 2021
Created on Mar 28, 2021

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.

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…

Fork of 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.

YYingkai Song
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a grid of solid-color circles arranged to show basic SVG shape construction and layering. It uses inline SVG markup within an HTML document to render ten circles with varying radii and colors, including a stack of nested circles at the right center. The circles are positioned using explicit `cx` and `cy` coordinates, with `fill` attributes defining their color. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s native SVG support, making it a static, code-only illustration of fundamental vector graphics primitives.

WWannabeProgrammerr
81% 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
80% 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
79% match
Loading thumbnail…

Episode 3: Sol LeWitt - circles pattern

This example renders 100 concentric circles centered on the screen, reproducing a Sol LeWitt-style wall drawing in SVG. Each circle uses a hardcoded radius increment, black stroke, and no fill, creating a bold geometric pattern. The code generates circles via `document.createElementNS` and appends them to an SVG element sized to the viewport. All geometry is specified through inline style properties, with no external libraries or data sources involved.

NNita
79% 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
78% match
Loading thumbnail…

Circle

This example displays a static SVG scene containing four filled circles arranged in a grid, alongside two hand-drawn paths with black strokes and no fill. The circles are positioned using explicit `cx` and `cy` attributes, while the paths are defined with `M` and `L` commands. Rendered inline in the HTML, the visualization relies solely on native SVG elements—such as `circle` and `path`—without any JavaScript libraries or animation logic, serving as a minimal sandbox for exploring basic shape placement and coordinate systems.

Ddeebanks77
78% match
Loading thumbnail…

Sol LeWitt reproductions

This example uses JavaScript and the SVG API to generate a geometric piece inspired by Sol LeWitt. It shows a grid of black vertical bars overlaid with repeating diagonal patterns of black and white circles, creating a sense of systematic repetition. The code creates SVG elements directly with `document.createElementNS`, setting attributes to position 100 rectangles and multiple circle rings across the full viewport. No external libraries are used; the rendering is purely procedural, and the visualization is static, with no interactivity or data input.

Llieta96
77% match