Skip to main content
SimilarExport ZIP
100%

Moving Circular Grid

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 6, 2025
Created on Aug 6, 2025

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 description

Sol 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

  1. A static circle clip path is created at the center of the canvas
  2. Horizontal lines are grouped together and clipped to the circle boundary
  3. The horizontal lines group has a rotation animation applied
  4. Vertical lines cover the entire canvas without any clipping
  5. The rotation animation spins the horizontal lines group while the circular boundary remains fixed
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Piece Vertical

This example reproduces a Sol LeWitt-style drawing using only SVG and JavaScript. It shows a grid of thin horizontal and vertical lines, where a circular region in the center is masked, leaving the vertical lines visible only outside the mask while the horizontal lines remain unobscured. The code builds the SVG programmatically via the Document Object Model API, using `createElementNS` to construct the `svg`, `mask`, `rect`, and `circle` elements, and applies the mask to the horizontal bands to create the circular cutout effect.

Yyejichun@naver.com
81% match
Loading thumbnail…

Sol LeWitt Horizontal Cirle Moving

This example generates an interactive abstract composition inspired by Sol LeWitt, using pure SVG and JavaScript without external libraries. It draws 100 horizontal blue and 100 vertical yellow rectangles, each masked by a central circle to create a cross-like overlay effect. The rectangles respond to mouseover events, transitioning their fill color to magenta, then reverting to green or beige on mouseout, with CSS transitions providing smooth color fade animations.

Eeric.r.thornhill@gmail.com
81% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

IIndranil Biswas
81% 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
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
79% match
Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-style geometric art piece using raw SVG and JavaScript. It shows a full-screen vertical grid of thin horizontal and vertical lines, with a central circular region highlighted by a mask. The rendering relies on the SVG `mask` element and dynamically created `rect` elements, using standard DOM APIs like `document.createElementNS`. The horizontal lines are clipped to a circle via the mask, while vertical lines span the full height, creating a layered, minimal composition.

JJinpeng Li
79% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using an SVG rendering approach. The visualization displays a grid of horizontal and vertical lines that are masked to create concentric circular patterns at the center of the viewport. The code dynamically generates 100 rectangular strips for each orientation, using inline SVG mask elements to clip the lines into the circular shapes. The piece runs entirely with native JavaScript DOM manipulation, creating the `svg`, `rect`, `mask`, and `circle` elements without external libraries.

AAdekola Aliu
79% 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
79% match