Viewing a saved revision (read-only)
ba07473a064641ebbebfc814756db8c5
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 a rotating circular mask that reveals intersecting horizontal and vertical lines.
Features
- Responsive canvas that adapts to window size
- Rotating circular mask using CSS animations
- 100 horizontal and 100 vertical lines creating a grid pattern
- The rotating circle reveals lines within its boundaries
How It Works
- A black rectangle covers the entire SVG as the mask background
- A white circle is placed inside the mask to create a "window"
- The circle is wrapped in a group element with rotation animation
- Horizontal lines use the mask to only show inside the circle
- Vertical lines cover the entire canvas without masking
- The rotation animation spins the circle group, creating a dynamic reveal effect