Get it Right - 3: Sol Lewitt (JS)

100%

Get it Right - 3: Sol Lewitt (JS)

✓ Published0🌍 Public

Last edited Jan 28, 2023

Created on Jan 27, 2023

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.

AI-generated description

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

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

89% match

Loading thumbnail…

Sol LeWitt

This example generates an abstract geometric composition inspired by Sol LeWitt, where horizontal and vertical striped bands form a cross-like pattern across the full screen. Two SVG `<mask>` elements define circular cutouts—one with a black background and white circle, the other inverted—so that the stripes alternate visibility through the center. The code builds 100 horizontal and 100 vertical rectangles via plain JavaScript DOM manipulation, setting each rectangle’s `mask` attribute to either `url(#circle-mask)` or `url(#circle-mask2)`. No external libraries are used; the rendering relies entirely on native SVG and CSS, with dynamic window dimensions set through `window.innerWidth` and `window.innerHeight`.

Llukasreber

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

83% match

Loading thumbnail…

Sol Levitt's Reproduction Vertical

This example generates a dynamic, grid-based composition inspired by Sol LeWitt’s geometric art. It uses JavaScript and the SVG API to draw two sets of alternating horizontal and vertical rectangles. A circular mask is applied to the first set, creating a central circular window, while an inverse mask on the second set produces a complementary ring effect. The code constructs SVG elements programmatically via `createElementNS`, setting rectangles and masks in a loop to form the final pattern.

Jjajinkyaa

82% match

Loading thumbnail…

Sol LeWitt

This example renders a generative SVG artwork inspired by Sol LeWitt. It uses raw JavaScript to create an SVG element sized to the browser window, then draws 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the canvas. A circular mask, defined in SVG and applied via the `mask` attribute, clips these rectangles, revealing a bold, striped disk centered on the screen. The piece demonstrates programmatic shape creation and SVG masking without any external libraries.

Bbillzhou2005

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

82% match

Loading thumbnail…

SOL LEWITT REPRODUCTION vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript. It shows a grid of thin horizontal and vertical rectangles intersecting over a central circle, created without external libraries or frameworks. The code uses `document.createElementNS` to build SVG `<rect>` elements inside two masks (`circle-mask` and `circle-mask-2`) to clip alternating stripes, with the circle radius fixed at 200 pixels. The rendering approach relies entirely on native DOM manipulation and SVG mask attributes, producing a clean, generative geometric pattern.

JJude-Clarke

82% match

Loading thumbnail…

Sol Lewitt

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

Vvikrantbhurke

81% match