Viewing a saved revision (read-only)
b936a69ea08c448ea901486bf52b2d6c
Moving Circular Grid
This example presents an interactive SVG art piece inspired by Sol LeWitt’s geometric work, featuring a static circular clipping region that reveals rotating horizontal lines. The implementation uses raw JavaScript to create SVG elements directly, with CSS animations driving the 20-second rotation of the horizontal group. Vertical lines span the full canvas without clipping, contrasting with the circular boundary. The code builds the scene by appending `rect` elements for both line sets, with a `clipPath` defining the visible circle.
AI-generated descriptionSol LeWitt Art Piece
An interactive SVG art piece inspired by Sol LeWitt's geometric works. Features rotating horizontal lines contained within a static circular boundary.
Features
- Responsive canvas that adapts to window size
- Static circular clipping path defines the visible area
- Rotating horizontal lines using CSS animations
- 100 horizontal and 100 vertical lines creating a grid pattern
- The rotation is applied only to the horizontal lines container
How It Works
- A static circle clip path is created at the center of the canvas
- Horizontal lines are grouped together and clipped to the circle boundary
- The horizontal lines group has a rotation animation applied
- Vertical lines cover the entire canvas without any clipping
- The rotation animation spins the horizontal lines group while the circular boundary remains fixed