Skip to main content
SimilarExport ZIP
100%

Sol Levitt Animated

✓ Published0🌍 Public
SSimon Krukowski
Last edited May 8, 2024
Created on May 8, 2024

Two layered grids of horizontal and vertical bars animate in opposing rotations, creating a shifting moiré effect. The foreground grid spins left while the background grid spins right, with circular masks revealing and concealing portions of each layer. Built with raw JavaScript and SVG, the visualization generates rectangles dynamically and applies CSS keyframe rotations to groups with distinct mask IDs.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Reproduction

This piece reproduces a Sol LeWitt-style generative drawing using layered, rotating horizontal and vertical bands. Two SVG masks—one with a white circle on black, the other inverted—reveal different textures within a central circular region. Narrow rectangles animate with `animateTransform`, rotating from 360 to 0 degrees over 10 seconds, creating a dynamic moiré effect. Built with plain JavaScript and the SVG DOM API, the composition fills the browser window and interactive hover turns rectangles red.

Vvivhogan@gmail.com
81% 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
80% 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
80% match
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
79% match
Loading thumbnail…

sol_lewitt_test2

This visualization creates a dynamic, grid-based composition inspired by Sol LeWitt’s geometric art. It uses SVG masks to alternate which quadrants show vertical or horizontal lines, while the `animate` API pulses the line widths over a five-second loop. The code constructs all elements programmatically with raw SVG namespace methods, producing a subtly shifting checkerboard pattern of animated stripes.

Ggaudi84
79% match
Loading thumbnail…

Spin on Sol LeWitt Reproduction

This visualization reproduces and animates a Sol LeWitt-inspired geometric composition using raw SVG elements created via the DOM API. It shows a grid of vertical and horizontal black bars overlaid with moving red and black rectangles that shift upward in a loop. The animation uses the Web Animations API’s `element.animate()` method with infinite iterations and translates the shapes along the Y-axis. Layered masking with a custom `mask1` element creates a woven effect across the canvas.

Vvinu.sampathk@gmail.com
78% match
Loading thumbnail…

Sol LeWitt in vanilla js exercise

This interactive SVG artwork, inspired by Sol LeWitt, uses intersecting triangular masks to create a dynamic, layered composition of colorful bars. The page renders two distinct geometric patterns: horizontal bands of random widths and colors from a rainbow palette, and vertical elements, all clipped by black and white triangle masks. Built with vanilla JavaScript and the SVG DOM API, the visualization responds to user interaction, with the primary triangle performing a slow rotation animation on hover.

Rrwata97
78% 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
78% match