Sol Lewitt Alternative - Colour Animation

100%

Sol Lewitt Alternative - Colour Animation

✓ Published1🌍 Public

Last edited Dec 10, 2024

Created on Dec 10, 2024

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.

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

90% match

Loading thumbnail…

Sol Lewitt Alternative - Rotate 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.

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

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

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

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…

Animation of Sol LeWitt

This example creates an abstract, animated SVG composition inspired by Sol LeWitt. It uses a full-window SVG canvas and draws a complex, irregular shape defined by an SVG path. The path is used in two separate mask elements, each controlling the visibility of a set of horizontal and vertical lines. By using these masks, the geometric line pattern is revealed only within the shape's boundaries, creating a dynamic interplay between form and structure. The code directly manipulates the SVG DOM through JavaScript and the `createElementNS` API.

CCora

83% match

Loading thumbnail…

Sol LeWitt reproduction with animation

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG and JavaScript, with no external libraries. It renders a 500x500 canvas containing a grid of 100 animated horizontal rectangles that cycle between yellow and cyan, overlaid with four large triangles positioned at the center, top-left, top-right, and bottom. Each triangle uses a distinct solid color—black, red, blue, and green—and is created via SVG `polygon` elements. The code demonstrates DOM manipulation through `document.createElementNS` and SVG’s native `animate` element for continuous color transitions.

IIgorGorin00

83% match