100%

Sol LeWitt Attempt #5 Vanilla JS

✓ Published1🌍 Public

Last edited Sep 9, 2025

Created on Sep 9, 2025

Forked from Sol LeWitt Attempt #3 Vanilla JS

This example generates an abstract geometric composition inspired by Sol LeWitt, built with vanilla JavaScript and the SVG API. It uses two SVG masks to create a pattern of interlocking diamond shapes from a grid of polygons. Fifty vertical and fifty horizontal rectangles are drawn, each masked to reveal or hide portions of the grid, producing a layered, woven effect. The code demonstrates manual SVG element creation via `document.createElementNS`, with no external libraries.

AI-generated description

UMMMMM? TADA?

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Attempt #5 Vanilla JS (Pattern #1)

This example generates an SVG composition inspired by Sol LeWitt's geometric wall drawings, using two masks to create an intersecting grid of vertical and horizontal stripes. The code builds a hexagonal pattern with `document.createElementNS` for SVG elements, applying `mask-1` and `mask-2` to 50 vertical and 50 horizontal rectangles. The masks are constructed from repeated polygon coordinates, producing a checkerboard-like overlay of alternating shapes. No external libraries are used; the rendering relies entirely on vanilla JavaScript and SVG masks to achieve the Op Art effect.

CCasualWanderer20XX

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

93% match

Loading thumbnail…

Sol LeWitt Attempt #5 Vanilla JS (Pattern #2)

This example recreates a Sol LeWitt wall drawing using two layered masks to generate a grid of repeated geometric patterns. The SVG renders alternating vertical and horizontal stripes, where each stripe is clipped by a hexagon-based mask created with nested polygons. The code uses raw Document Object Model (DOM) methods like `document.createElementNS` to build the SVG structure, with no external libraries. The pattern emerges from the intersection of the two masks, producing a dynamic optical effect across the 1000 by 700 pixel canvas.

CCasualWanderer20XX

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

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

88% match

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript (2)

This example reproduces a Sol LeWitt art piece using only vanilla JavaScript and the SVG API. It shows a grid of black vertical and horizontal rectangles intersecting within a central white area, created through layered masking. The code builds an SVG mask with a large white rectangle and a smaller black rectangle to hide portions of the vertical stripes, while a foreground mask with a white center reveals the horizontal stripes within the same central region. The rendering approach relies on programmatic SVG element creation and mask compositing.

Xxinyuwangxyw

88% match

Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

JJun Alvarado

88% match

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

Xxinyuwangxyw

87% match