Sol LeWitt reproduction with animation

100%

Sol LeWitt reproduction with animation

✓ Published0🌍 Public

Last edited Mar 5, 2023

Created on Mar 5, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Sol Lewit

This example generates a grid of colored squares that reorganize into a circular pattern, inspired by the geometric art of Sol LeWitt. Using raw SVG elements created via the DOM API, it renders 960 by 500 pixels of animated transformations. The code relies on JavaScript to manipulate square positions and colors in a looping sequence, though no external libraries like D3 are imported. The result is a minimalist, abstract visualization that explores repetition and systematic variation.

AAdnan Niazi

86% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT-inspired geometric composition using raw SVG and JavaScript. The visualization layers two sets of striped rectangles—one horizontal, one vertical—whose visibility is controlled by circular masks, creating a clean intersection of perpendicular lines within a central circle. The code constructs SVG elements programmatically via `document.createElementNS`, applying masks with a white circle on black and an inverted black circle on white to reveal alternating patterns. No external libraries are used; the rendering relies entirely on native SVG mask and rect primitives.

Aabhineetsingh10

86% match

Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie

85% match

Loading thumbnail…

Sol LeWitt

This example generates a minimalist SVG composition inspired by Sol LeWitt, displaying 100 vertical rectangles evenly spaced across a 960-by-500-pixel canvas. Each rectangle maintains a fixed width of 10 pixels and spans the full height of the canvas, creating a rhythmic, striped pattern. The visualization is built programmatically using raw JavaScript and the SVG API, specifically creating SVG elements via `document.createElementNS` and appending them to the document. No external libraries are used; the rendering relies entirely on native browser support for SVG and scripting.

NNikki Masroor

85% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

85% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example renders a vertical Sol LeWitt-inspired composition using raw SVG and JavaScript. It creates 100 rectangle elements, each 10 pixels tall and spaced 20 pixels apart, stacked vertically across the full width of the browser window. The rectangles are appended directly to an SVG element created via the Document API, with the total canvas size determined by `window.innerWidth` and `window.innerHeight`. No additional libraries are used; the code relies solely on native DOM manipulation and SVG attributes.

DDonald Bagwell

85% match

Loading thumbnail…

Sol LeWtt Reproduction

This example reproduces a minimalist Sol LeWitt-inspired drawing using only SVG and JavaScript. It generates a series of 100 vertical rectangles with varying widths, creating a rhythmic grid pattern that spans the full height of the viewport. The code uses the Document Object Model (DOM) method `createElementNS` to construct SVG elements directly, with a simple `for` loop to position each rectangle horizontally. No external libraries are required—only standard JavaScript and CSS within a single HTML file. The result is a clean, geometric composition that fills the window dynamically.

DDanilo Moraes

85% match

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG elements created directly through the DOM API. It shows a series of 100 thin vertical rectangles evenly spaced across the full height of the browser viewport, creating a minimalist striped pattern. The visualization uses `document.createElementNS` to generate SVG `rect` elements, setting each rectangle’s width to 10 pixels and its horizontal offset to 20 pixels apart. No external libraries are used, relying purely on vanilla JavaScript and CSS to render the geometric composition dynamically based on the window size.

HHéloïse Feldmann

85% match