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

100%

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

✓ Published0🌍 Public

Last edited Dec 3, 2022

Created on Dec 3, 2022

Forked from Get it Right - 3: Sol Lewitt (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.

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)

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.

WWaseem Medhat

87% match

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an abstract, animated composition inspired by Sol LeWitt’s geometric wall drawings. A grid of 200 vertical rectangles, each filled with a random bright RGB color, extends across the full window height, with each rectangle independently bobbing upward in a looping translateY animation. Centered in the viewport, a white circle is drawn, and a separate mask (defined via SVG `mask` and `defs`) is applied to a grid of horizontal rectangles, so that only the circular area reveals the second set of stripes. The sketch uses only vanilla JavaScript and the SVG DOM API, without any external libraries, to assemble and animate the shapes.

JJaga-droid

81% 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…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3 Nita's Piece

This piece generates an abstract animated composition in the spirit of Sol LeWitt using vanilla JavaScript and the SVG API. A vertical grid of 200 randomly colored rectangles spans the full window height and animates upward infinitely with randomized durations. A large white circle is drawn over the center of these moving bars. A second horizontal grid of rectangles is then rendered across the entire canvas, but it is clipped by a mask defined with a circle element, revealing a circular window that shows the white shape and the animated color field below.

Ddr-acc

81% match

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

81% match

Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall

81% match

Loading thumbnail…

Fork of Sol LeWitt in vanilla js vertical

This visualization displays a series of horizontal stripes that are only visible within a circular region centered on the screen. The piece uses a mask to reveal the stripes, which are rectangles with a fixed height of 10 pixels, spaced 30 pixels apart and spanning the full width of the viewport. The implementation relies on vanilla JavaScript and the SVG API, creating elements like `svg`, `mask`, `circle`, and `rect` dynamically. The mask uses a black circle to hide the outer stripes, while white fills the rest of the mask to show the bars inside.

Rrwata97

80% match

Loading thumbnail…

Fork of Sol LeWitt Vertical Variant

This visualization reproduces a Sol LeWitt-style geometric composition on a full-screen SVG canvas. It shows a grid of thin horizontal and vertical bars intersecting around a central circular void, creating a cross-shaped negative space. The piece uses two SVG masks to selectively reveal either the horizontal or vertical rectangles. One mask shows a white circle on a black background, while the other is inverted; JavaScript loops generate 100 rectangles in each orientation, each assigned one of the masks to achieve the layered effect.

Ttriciascully

80% match