Skip to main content
SimilarExport ZIP
100%

Get it Right - 3: Sol Lewitt (JS)

✓ Published2🌍 Public
WWaseem Medhat
Last edited Nov 29, 2022
Created on Nov 28, 2022
Forked from HTML Starter

An animated SVG composition generates Sol LeWitt-inspired geometric art using vanilla JavaScript. It renders a grid of darkslateblue vertical and horizontal rectangles with beige strokes, where horizontal bands are clipped by a white rectangle mask over a black background. Every 750 milliseconds, the render function recreates the SVG with a randomly chosen line width between 20 and 35 pixels, altering the grid density. The piece updates dynamically, shifting from a dense weave to a sparser lattice while maintaining the stark black, white, and blue palette.

AI-generated description

Episode 3 exercise for Get it Right in Black and White

Using vanilla JavaScript to generate Sol Lewitt-esque art.

MIT Licensed

Similar vizzes

Loading thumbnail…

Get it Right - 3: Sol Lewitt (JS)

This example generates an abstract geometric composition in the style of Sol Lewitt, using an SVG canvas. Vertical and horizontal rectangles with thick beige strokes are layered over a darkslateblue background, with horizontal bands clipped by an SVG mask to create a central rectangular window. The code manipulates SVG elements directly with JavaScript, rebuilding the scene on an interval using `setInterval` and varying the line width to shift the pattern. The mask, defined with `mask` and `rect` elements, controls the visible region.

CCosmosDude1
89% match
Loading thumbnail…

Fork of Get it Right - 3: Sol Lewitssvat (JS)

This animated SVG piece generates Sol LeWitt-inspired geometric art using vanilla JavaScript. Vertical and horizontal bars in darkslateblue with beige strokes fill the canvas, while a mask reveals a horizontal white band across the lower portion. The `render` function rebuilds the SVG every 750 milliseconds, varying bar thickness between 30 and 45 pixels. Using standard SVG elements like `rect` and `mask`, the piece cycles through subtle structural permutations, echoing the minimalist aesthetic of the original exercise.

Zzaioris
87% match
Loading thumbnail…

Sol Lewitt in Vanilla JS

This piece reproduces a Sol Lewitt art concept using a generative, animated SVG composition. It displays a rotating triangular mask that reveals or conceals a grid of horizontal and vertical lines, creating a dynamic interplay of shapes. Rendered entirely in vanilla JavaScript, the code dynamically creates SVG elements via `createElementNS`, building a responsive full-window graphic. The animation is driven by CSS keyframes, while two distinct SVG masks, one inverting the other, control the visibility of the line grid, producing a clean, geometric visual effect.

JJaga-droid
81% match
Loading thumbnail…

Sol LeWitt Attempt #3 Vanilla JS

This example renders an abstract geometric composition inspired by Sol LeWitt’s wall drawings, built with vanilla JavaScript and the SVG API. It shows a 1000×700 canvas filled with alternating vertical and horizontal stripes that appear to weave through a central hourglass-like polygon shape. Two SVG masks define the visible regions: the first mask applies to 50 vertical red stripes, the second to 50 horizontal red stripes, creating a layered visual effect where the pattern changes orientation within the polygon. The code constructs the SVG elements dynamically using `createElementNS`, with mask polygons and stripe rectangles, demonstrating a low-level approach without external libraries.

CCasualWanderer20XX
80% 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
80% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This example reproduces a Sol LeWitt-inspired art piece as an animated SVG composition. It shows a grid of thin vertical rectangles with randomized colors and staggered upward motion, overlaid with a large white circle. A second circle acts as a mask, revealing a hidden layer of horizontal rectangles beneath. The piece is built entirely with Vanilla JavaScript, creating SVG elements dynamically and animating them with the Web Animations API’s `animate()` method, using randomized durations and infinite iterations.

Ccssergio
80% match
Loading thumbnail…

Sol Lewitt in Vanilla JS Project Attempt #1

This example recreates a Sol Lewitt-inspired geometric drawing using nested, alternating black-and-white rectangles that shrink toward the center of an SVG canvas. The work is generated entirely with vanilla JavaScript, manipulating SVG elements through the Document Object Model (DOM) and the `createElementNS` API. It renders a grid of concentric rectangles with varying stroke widths and fill colors, producing a static, pattern-based composition. The code uses raw SVG string concatenation within a loop to build the shapes, with no external libraries or data sources involved.

CCasualWanderer20XX
79% match
Loading thumbnail…

Sol LeWitt reproductions

This example uses JavaScript and the SVG API to generate a geometric piece inspired by Sol LeWitt. It shows a grid of black vertical bars overlaid with repeating diagonal patterns of black and white circles, creating a sense of systematic repetition. The code creates SVG elements directly with `document.createElementNS`, setting attributes to position 100 rectangles and multiple circle rings across the full viewport. No external libraries are used; the rendering is purely procedural, and the visualization is static, with no interactivity or data input.

Llieta96
79% match