Sol Lewitt Alternative - Scale Animation

100%

Sol Lewitt Alternative - Scale Animation

✓ Published0🌍 Public

Last edited Dec 10, 2024

Created on Dec 10, 2024

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

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

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

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

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

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

86% match

Loading thumbnail…

Sol LeWitt

This example reproduces Sol LeWitt’s geometric art using an SVG rendering approach. It displays a grid of horizontal and vertical stripes, but only within a circular region at the center of the screen. The code creates SVG masks, specifically `circle-mask` and `circle-mask2`, to clip two sets of 100 rectangle elements. The first set uses a white-on-black mask for horizontal stripes, while the second uses a black-on-white mask for vertical stripes, producing a clean, intersecting pattern. The canvas automatically scales to the full window dimensions.

Aamrselaraby

86% match

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge

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