Animation of Sol LeWitt

100%

Animation of Sol LeWitt

✓ Published0🌍 Public

Last edited Apr 2, 2025

Created on Mar 30, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

Sol Lewitt Variante

This example recreates a Sol LeWitt-inspired wall drawing as an interactive SVG visualization. The artwork shows a grid of thin horizontal and vertical lines that are visible only within two overlapping circular masks, creating a crosshatched pattern inside the circles against a blank background. The code uses plain JavaScript with the SVG DOM API, creating mask elements and hundreds of rect primitives programmatically. A black-filled mask with a white circle reveals the horizontal lines, while an inverted mask with a black circle reveals the vertical lines, demonstrating a simple yet effective clipping technique.

Iibaird6@gatech.edu

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

83% match

Loading thumbnail…

Sol LeWitt 2

This example creates a generative, Sol LeWitt-inspired drawing using SVG masks to combine horizontal and vertical line grids into a circular composition. A large circle is used in two complementary mask definitions, `circleMask` and `circleMask2`, to reveal a set of 100 horizontal strips and a second set of 100 vertical strips. The first mask shows the horizontal lines within the circle while hiding the background, and the second mask does the opposite for the vertical lines, creating a crosshatched effect that only appears in the overlapping circular area. The code builds all SVG elements dynamically using the `createElementNS` API.

CCora

83% match

Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Aainhoadieruiz@gmail.com

83% match

Loading thumbnail…

Sol Lewitt

This example visualizes a grid of horizontal and vertical lines composed with a circular mask, creating an interwoven geometric pattern reminiscent of Sol LeWitt’s minimalist drawings. The code uses native SVG elements—`rect`, `mask`, and `circle`—to control which regions of the line grid remain visible, with two complementary masks revealing intersecting bands around the center. All shapes are generated programmatically via a loop, with the window dimensions set dynamically. This work demonstrates how simple SVG masking techniques can produce complex, aesthetically striking compositions.

Aashutoshc018@gmail.com

83% match