LeWitt animate

100%

LeWitt animate

✓ Published0🌍 Public

Last edited Nov 5, 2023

Created on Nov 5, 2023

Forked from LeWitt Reproduction vertical

This example animates a grid of vertical lines, each moving upward at a random speed to create a lively, generative pattern. It renders SVG rectangles directly with JavaScript, setting each line’s fill to a bright green (#00FF66). The animation uses the Web Animations API via `element.animate`, applying an infinite, randomized `translateY` keyframe over a duration of up to 3000 milliseconds. A circular mask highlights the central region, while the page size adapts to the browser window, showing a minimal HTML/CSS approach without external libraries.

AI-generated description

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

Similar vizzes

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing by generating a grid of horizontal and vertical stripes that intersect across the full browser window. Two SVG masks create a central circular aperture: the first mask reveals the horizontal stripes inside the circle, while the second reveals vertical stripes outside it, producing a clean compositional contrast. The page builds the SVG programmatically using vanilla JavaScript and the DOM API, with no external libraries. The code sets element dimensions from `window.innerWidth` and `window.innerHeight`, ensuring the artwork adapts to the viewport.

Ggrassfluffy02

82% match

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing as a vertical field of narrow, evenly spaced rectangles rendered in SVG. The visualization fills the entire browser window, with each rectangle positioned incrementally along the horizontal axis using a loop that creates 100 elements. The code uses native DOM manipulation via `document.createElementNS` and `svg.setAttribute` to construct the scene, without relying on external libraries. The page dynamically sizes the artwork to the viewport through `window.innerWidth` and `window.innerHeight`, and includes commented-out mask and circle code that is not active in the final render.

Ggrassfluffy02

82% match

Loading thumbnail…

LeWitt Reproduction vertical

This example recreates a Sol LeWitt-inspired drawing using only SVG elements, producing a grid of alternating horizontal and vertical lines that intersect within two circular masks. The code generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, and uses two SVG masks—one with a white circle on black and another with a black circle on white—to reveal different line orientations in concentric regions. The visualization is built entirely with native DOM methods like `createElementNS` and `setAttribute`, without relying on D3.js, despite the accompanying `index.js` file importing `select` from D3.

Bbindas1

79% match

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

79% match

Loading thumbnail…

SoL LeWitt practice (from video)

This example generates a grid-based composition inspired by Sol LeWitt’s wall drawings. Using SVG elements created via the DOM API, it overlays two sets of thin rectangles—alternating vertical and horizontal stripes—onto a canvas. Two SVG masks, each containing a circle and a contrasting rectangular fill, control visibility: one mask reveals the vertical stripes within a central circle, while the other hides the horizontal stripes inside the same circular area. The result is a dynamic interplay of intersecting lines, with the circle acting as a focal lens that inverts the pattern. Rendered in a browser, it runs on JavaScript with no external libraries.

Ddan.tinoco@gmail.com

79% 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

79% match

Loading thumbnail…

LeWitt Vertical

This example creates a generative, grid-based composition inspired by Sol LeWitt’s wall drawings. It renders a series of black vertical bars evenly spaced across the full width and height of the browser window. The visualization is built entirely with raw SVG elements created via the Document Object Model API, using `document.createElementNS` and `setAttribute` to add rectangle shapes directly to an SVG container. No external libraries are used, and the bar width and spacing are calculated dynamically from the viewport dimensions. The result is a simple, minimalist pattern that fills the screen.

Ttomasnihlen

78% match

Loading thumbnail…

LeWitt Recreation w/ JS & SVG

A minimalist digital recreation of Sol LeWitt's geometric wall drawings uses JavaScript and SVG to layer a grid of black rectangles over a large white circle and a contrasting white rectangle over a black circle, with two SVG masks controlling visibility. The code constructs all shapes dynamically via DOM creation methods like `createElementNS` and `setAttribute`, requiring no external libraries, and renders at full window dimensions. The masks invert the patterns, producing an interplay of intersecting horizontal and vertical lines across the canvas.

MMarvin Frede

78% match