Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Horizontal Cirle Moving

✓ Published0🌍 Public
Eeric.r.thornhill@gmail.com
Last edited May 8, 2025
Created on May 8, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Horizontal Cirle

A web page renders a dynamic, mask-based homage to Sol LeWitt's geometric art. The visualization displays a central circle composed of horizontal and vertical striped bands, created using SVG elements and CSS mask compositing. It draws 100 horizontal rectangles masked by a circular region, and 100 vertical rectangles masked by an inverse circle, all generated procedurally with JavaScript. The `document.createElementNS` API constructs SVG nodes, while `mask` and `circle` elements define the visible shape, resulting in a crisp, monochrome pattern that fills the browser viewport.

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

Sol LeWitt

This example reproduces a Sol LeWitt-inspired geometric drawing using SVG. A series of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart, render across the full screen width. A circular mask centered on the viewport clips these rectangles, revealing only the lines inside the circle. The visualization uses plain JavaScript to create SVG elements dynamically, with no external libraries, and responds to the browser window’s dimensions for sizing.

Ttonkocorp
84% match
Loading thumbnail…

Sol Lewitt with JS

This example generates an abstract geometric composition inspired by Sol LeWitt, using only JavaScript and the SVG API. It creates two nested masks—a circular cutout and a circular fill—to render a grid of vertical and horizontal rectangles that intersect only within a central circle. The vertical rectangles are visible outside the circle, while the horizontal ones appear only inside it, producing a clean, mask-based interaction. The code sets the SVG dimensions to the browser window size and constructs all shapes procedurally via the DOM API.

Ppirani.sabah@gmail.com
83% match
Loading thumbnail…

Sol LeWitt reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript to generate SVG elements dynamically. It displays a composition of horizontal and vertical striped rectangles that form a distinct circular pattern at the center of the viewport. The rendering uses two SVG masks, `inner-circle-mask` and `outer-circle-mask`, to control the visibility of the 100 horizontal and 100 vertical `<rect>` elements, which are sized relative to the window’s dimensions. The code relies on basic SVG APIs such as `createElementNS`, `setAttribute`, and `appendChild` to construct the artwork.

AAngela Kochoska
83% match
Loading thumbnail…

Sol LeWitt reproduction with animation

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG and JavaScript, with no external libraries. It renders a 500x500 canvas containing a grid of 100 animated horizontal rectangles that cycle between yellow and cyan, overlaid with four large triangles positioned at the center, top-left, top-right, and bottom. Each triangle uses a distinct solid color—black, red, blue, and green—and is created via SVG `polygon` elements. The code demonstrates DOM manipulation through `document.createElementNS` and SVG’s native `animate` element for continuous color transitions.

IIgorGorin00
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 reproduction Vertical

A web-based reproduction of Sol LeWitt's wall drawing, rendered as a full-screen SVG using programmatic JavaScript. The piece displays a grid of thin, alternating horizontal and vertical gray bars, with a circular mask that inverts the contrast in the center, creating a subtle optical effect. It uses the raw SVG DOM API (`createElementNS`) to build elements, applying two masks (`circle-mask` and `circle-mask2`) to control visibility. The design is generated entirely in code, with no external libraries, drawing 100 horizontal and 100 vertical rectangles.

DDilara Bozkurt
83% match
Loading thumbnail…

Sol LeWitt Remixed

This example renders a simplified Sol LeWitt-inspired geometric composition using vanilla JavaScript and the SVG DOM API. It creates a full-screen dark green background, centers a bright green circle, and overlays alternating vertical rectangles across the width to produce a striped pattern that masks the circle. The code computes element coordinates from `window.innerWidth` and `window.innerHeight`, and uses `document.createElementNS` to construct the SVG nodes directly without any external libraries.

YYiorgos Bagakis
83% match