Sol Lewitt Alternative - Rotate Animation

100%

Sol Lewitt Alternative - Rotate Animation

✓ Published1🌍 Public

Last edited Dec 10, 2024

Created on Dec 10, 2024

Forked from Sol Lewitt Alternative - Colour Animation

This example reproduces Sol Lewitt’s geometric art using an SVG mask animation. Horizontal and vertical striped rectangles move with a CSS `rotateAnimation` keyframe transform, but their visibility is filtered through two circular masks: one showing white (visible) over a black background, the other showing black (hidden) over a white background. The JavaScript dynamically creates the SVG elements, setting each rect’s mask attribute to `url(#circle-mask)` or `url(#circle-mask-2)`, producing a rotating interplay of revealed and concealed line segments. The animation runs on a 12-second loop with eased timing.

AI-generated description

Trying to reproduce Sol Lewitt art.

See for mask content the Mask Tutorial

Masks - black = you can't see it, white = you can

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Alternative - Scale Animation

This example reproduces Sol Lewitt-inspired geometric art using an animated SVG mask. A black rectangle with a white circle masks a grid of horizontal stripes, while a second mask inverts the effect for vertical stripes. The circle’s radius animates between 200 and 0 via CSS `@keyframes` and the `r` property, creating a pulsing circular window. The code dynamically generates 100 horizontal and vertical `<rect>` elements using the DOM API, applying masks with `mask` and `url(#circle-mask)` references.

Hhquazza@gmail.com

92% match

Loading thumbnail…

Sol Lewitt Alternative - Colour Animation

This example reproduces Sol Lewitt’s geometric art by generating a full-screen SVG with a dynamic color animation. It overlays two sets of thin rectangular strips—one horizontal and one vertical—each masked by a central circle, so the strips are only visible within the circular region. The horizontal strips cycle through blue, green, yellow, orange, and red via CSS `@keyframes` applied to the `fill` property, while the vertical strips use a separate animation class. The masks are built with the SVG `<mask>` element, and all shapes are created programmatically using the DOM API.

Hhquazza@gmail.com

89% match

Loading thumbnail…

Sol Lewitt Circle Animated

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)`.

Tthenlpstudent

86% 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…

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…

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…

Following Along Sol LeWitt

This example recreates Sol LeWitt’s geometric wall drawings using layered SVG masks and rotating stripes. Alternating purple and dark-purple horizontal and vertical bands are clipped to two complementary circular masks, producing a crossing pattern inside a central ring while the outer area remains solid. The horizontal bands rotate continuously via CSS keyframe animations. The code builds all elements dynamically with vanilla JavaScript, using the SVG `mask`, `rect`, and `circle` APIs without any external libraries.

PParker-D5

83% match

Loading thumbnail…

Sol Lewitt in Vanilla JS

This piece reproduces a Sol Lewitt art concept using a generative, animated SVG composition. It displays a rotating triangular mask that reveals or conceals a grid of horizontal and vertical lines, creating a dynamic interplay of shapes. Rendered entirely in vanilla JavaScript, the code dynamically creates SVG elements via `createElementNS`, building a responsive full-window graphic. The animation is driven by CSS keyframes, while two distinct SVG masks, one inverting the other, control the visibility of the line grid, producing a clean, geometric visual effect.

JJaga-droid

82% match