Sol Lewitt Circle Animated

100%

Sol Lewitt Circle Animated

✓ Published0🌍 Public

Last edited May 12, 2023

Created on May 12, 2023

An animated SVG composition recreates Sol Lewitt’s circle drawings by layering two sets of thin, colored lines. Vertical lines and horizontal lines are drawn as rectangles, each clipped by a circular mask that alternately reveals or hides the center. The line thickness and spacing incrementally increase each frame, cycling from fine grids to bold strokes. The animation uses raw `document.createElementNS` for SVG elements, `window.requestAnimationFrame` for looping, and masks defined with `url(#mask-id)`.

AI-generated description

Sol Lewitt Circle Animated using Masks

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Circle

Full-screen SVG masks create a circular window that reveals intersecting vertical and horizontal striped rectangles, based on Sol Lewitt’s wall drawings. The code constructs two masks—one with a white circle on black and another with a black circle on white—then applies them to 100 vertical and 100 horizontal rectangles using `createElementNS` and `setAttribute`. This renders a geometric pattern where the circle area shows colored bands while the surrounding background remains empty.

CCameron Wehr

86% match

Loading thumbnail…

SVG Fundamental - Sol Lewitt

This example generates an abstract, animated composition inspired by Sol LeWitt, built entirely with raw SVG and JavaScript. It creates two circular masks, each containing a circle whose radius animates over 15 seconds, and applies them to groups of rectangles that rotate continuously. The code uses the SVG `circle`, `rect`, `mask`, `animate`, and `animateTransform` elements to cycle colors between black and white and rotate the shapes 360 degrees. No external libraries are used; the visualization directly manipulates the DOM via `document.createElementNS` to construct the scene dynamically.

BBart van Pelt

85% match

Loading thumbnail…

Reproduction Sol Lewitt Horizontal

This example reproduces Sol LeWitt’s horizontal wall drawing using animated SVG masks to create a shifting circular aperture over a grid of horizontal and vertical lines. The visualization shows a pulsing black-and-white circle that expands and contracts, revealing and hiding the underlying striped composition as the masks animate. Built entirely with raw SVG elements and the Web Animations API via `animate` and `animateTransform`, the code generates 950-pixel-wide rectangles and vertical strips, applying `mask` and `mask2` to alternate visibility. The circular mask radius animates over five seconds, while a separate rotation transform spins the vertical lines, mimicking LeWitt’s geometric rules.

KKhanAzmat

85% match

Loading thumbnail…

Animated Sol LeWitt reproduction

This animated SVG reproduces the geometric style of artist Sol LeWitt using strips of vertical rectangles. Two circular masks, one inverted, move diagonally across the canvas while their radii pulse between 200 and 100 pixels. The animation is created entirely with native SVG elements, including `<mask>`, `<circle>`, and `<animate>` tags, which drive the motion of the mask centers along viewport-perimeter paths. The code constructs roughly one hundred rectangular bars via a repeated loop, with each rect filtered through the masks to reveal shifting patterned compositions.

HHtet Yan Oo

84% match

Loading thumbnail…

Sol LeWitt Reproduction Final

This interactive HTML page reproduces Sol LeWitt's geometric art using dynamically generated SVG elements. It displays a grid of horizontal and vertical black lines, which are masked to reveal a central circular area where the lines are visible. The piece uses two SVG masks, `circle-mask` and `circle-mask-2`, to create the contrast. The first mask shows only the horizontal lines inside a 200-pixel radius circle, while the second mask reveals vertical lines in the surrounding area. The code utilizes the Document API to create the SVG structure and elements programmatically in JavaScript.

Kkwambokar

84% match

Loading thumbnail…

Sol Lewitt Reproduction - SVG

This example reproduces a Sol Lewitt conceptual drawing using only SVG and JavaScript. It renders two sets of horizontal and vertical striped rectangles that are masked to reveal a central circle, with each line pattern clipped differently to create the interplay of shapes. The code dynamically generates SVG elements via the DOM API, using masks and circles to control visibility, and adapts the artwork to the full browser window dimensions.

AAdil Zeshan

83% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This visualization reproduces a Sol LeWitt-inspired geometric drawing using an SVG scene under a circular mask. It shows a grid of fine black lines—horizontal strokes overlapped by vertical strokes—that remain visible only inside a centered circle, while the surrounding area stays blank. The code uses raw SVG element creation via `document.createElementNS` and `mask` elements to achieve the cutout effect. The rendering consists of 100 horizontal rectangles and 100 vertical rectangles, with the circle mask controlling visibility.

KKhanin Sisaengsuwanchai

83% match

Loading thumbnail…

Sol Lewitt

This is a reproduction of a Sol LeWitt wall drawing using custom SVG masks and rectangles. Two perpendicular sets of thin lines are drawn: one set of vertical lines is masked to appear only outside a central circle, while a second set of horizontal lines is masked to appear only inside that same circle, creating a two-tone grid composition. The code uses the Document Object Model APIs `createElementNS` and `setAttribute` to construct the SVG and masks.

RRajiv Iyer

83% match