Fork of Episode 3: Sol LeWitt - circles pattern

100%

Fork of Episode 3: Sol LeWitt - circles pattern

✓ Published0🌍 Public

Last edited Jan 6, 2023

Created on Jan 6, 2023

Forked from Episode 3: Sol LeWitt - circles pattern

This visualization recreates a Sol LeWitt-inspired geometric drawing using overlapping concentric circles centered on the canvas. The circles are drawn with a blue stroke and varying radii, but a mask restricts their visibility to a combination of a polygon, a circle, and a rectangle. The code builds the SVG structure dynamically using the DOM API, creating the mask and circles via JavaScript. The mask's white shapes reveal portions of the circle pattern, while the black background hides the rest, producing a fragmented, abstract composition.

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…

Fork of Sol LeWitt reproduction circle

This example reproduces a Sol LeWitt wall drawing by generating two intersecting sets of striped rectangles within a circular mask on an SVG canvas. One set of horizontal bands is clipped by a white circle mask, while a second set of vertical bands is clipped by an inverted black circle mask, creating a checkerboard-like pattern inside the circle. The code uses raw JavaScript and the SVG DOM API, creating elements with `document.createElementNS` and applying masks via `url(#circle-mask)` and `url(#circle-mask-2)`. The rectangles are laid out programmatically in two loops of 100 iterations each.

Jjonathanh21

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using SVG elements and mask-based compositing. It shows a grid of horizontal and vertical stripes that intersect within a central circular region, creating a geometric pattern where line orientations alternate inside and outside the circle. The code uses raw SVG DOM manipulation via `createElementNS` to build rectangles and defines two masks (`circle-mask` and `circle-mask-2`) to control visibility. Horizontal stripes appear inside the circle, while vertical stripes fill the outer area, demonstrating how SVG masks can selectively reveal layered shapes.

MMarcus Vinicius da Silveira Richa

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

84% match

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This visualization shows a grid of vertical, randomly colored rectangles overlaid with a large white circle in the center. A second grid of horizontal rectangles is masked to appear only inside that central circular region. The piece is built by constructing SVG elements directly, including both vertical and horizontal rectangles, and using a mask with a circle to clip the horizontal grid to the circular area. The code uses the Document API to create SVG elements and applies inline styles for fill colors and geometry.

NNita

84% match

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an abstract, animated composition inspired by Sol LeWitt’s geometric wall drawings. A grid of 200 vertical rectangles, each filled with a random bright RGB color, extends across the full window height, with each rectangle independently bobbing upward in a looping translateY animation. Centered in the viewport, a white circle is drawn, and a separate mask (defined via SVG `mask` and `defs`) is applied to a grid of horizontal rectangles, so that only the circular area reveals the second set of stripes. The sketch uses only vanilla JavaScript and the SVG DOM API, without any external libraries, to assemble and animate the shapes.

JJaga-droid

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using an SVG rendering approach. It displays a grid of horizontal and vertical lines that intersect within two circular masks, creating a nested geometric pattern centered on the screen. The code constructs SVG elements dynamically via the Document API, using `createElementNS` to build rectangles and circles. Two masks (`circle-mask` and `circle-mask-2`) control visibility: the first reveals horizontal stripes inside a 200-pixel-radius circle, while the second exposes vertical stripes in the surrounding area, producing a layered, minimalist composition.

NNeel Mehta

83% match

Loading thumbnail…

Fork of Sol LeWitt reproduction circle

This example reproduces Sol LeWitt’s geometric wall drawing using purely SVG and JavaScript DOM APIs. A circular mask is applied over a grid of horizontal and vertical rectangle strips, with two complementary masks alternating light and dark bands. The result is a clean, mask-based rendering of intersecting lines confined to a circle, created dynamically without any external visualization libraries. The code relies on raw SVG element creation and mask definitions to achieve the effect.

Nnitika1234567

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

83% match