Skip to main content
SimilarExport ZIP
100%

Fork of Sol Lewitt in Vanilla JS Project Attempt #1 (Finishing up)

✓ Published0🌍 Public
CCasualWanderer20XX
Last edited Sep 9, 2025
Created on Sep 9, 2025

This example shows a geometric composition of concentric rectangles that shrink toward the center of an SVG canvas, with a visible mask creating a hollow square hole in the middle. The rectangles are generated in a JavaScript while loop, using the SVG DOM API to create mask elements and rect elements dynamically. The code sets stroke widths and border increments to space each rectangle, while the mask, defined with white and black fill regions, determines which parts of the rectangles remain visible. The result is a minimalist, grid-like pattern inspired by Sol LeWitt, rendered entirely in SVG.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Sol LeWitt reproduction

This example reproduces the wall drawing style of Sol LeWitt using only SVG shapes and the native DOM API. It renders one hundred horizontal rectangles, each 10 pixels tall, evenly spaced down the screen, all clipped by a circular mask centered in the viewport. The page creates an SVG element dynamically, appends a mask with a white background and a black circle, then generates the rectangles in a loop without any external libraries. The result is a minimalist geometric pattern that highlights how simple SVG primitives can achieve a refined, artistic composition.

Aaidarshafeev1@gmail.com
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition entirely through SVG elements. It shows a grid of horizontal and vertical bands that intersect within a centered circular boundary, creating a patterned interplay of lines and negative space. The code constructs the visualization using raw JavaScript and the SVG DOM API, creating two masks—one with a black background and white circle, the other with the inverse—to alternately reveal horizontal stripes inside the circle and vertical stripes outside it. One hundred rectangles are generated for each orientation, each masked to produce the final layered effect.

AAWLGAWLG
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example creates a grid of thin horizontal and vertical rectangles using SVG, with two circular masks that reveal and hide portions of the lines. The pattern is generated through two loops that position 100 rectangles each, alternating their orientation. SVG mask elements define the visible area: one mask exposes a central circle of horizontal lines, while the other inverts the circle to show vertical lines outside the center. The rendering uses native JavaScript DOM manipulation via `createElementNS` to build the SVG structure dynamically, with no external libraries.

Zzaioris
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using raw SVG and JavaScript, rendering a canvas-sized circular mask layered over intersecting horizontal and vertical bands. The page builds an SVG scene with two circle masks: one reveals a grid of horizontal rectangles, while an inverse mask exposes vertical rectangles, creating a Moiré-like pattern. The code constructs elements via the DOM API (`document.createElementNS`, `setAttribute`) and appends them to the SVG root, with masks defined as `<mask>` elements containing `<rect>` and `<circle>` shapes. No external libraries are used; all rendering relies on native SVG primitives and inline styling.

Ttwospikesfpg@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

MMaras13
86% 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
86% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements and mask manipulation. The visualization renders a series of overlapping horizontal and vertical stripes by creating rectangles and applying circular SVG masks to confine their visibility, producing a geometric composition. The code uses DOM manipulation via `createElementNS` and `setAttribute` to construct the SVG, with two distinct masks (`circle-mask` and `circle-mask-2`) controlling different stripe patterns. The result is a monochromatic, grid-based artwork where varying rectangle heights and widths generate a rhythmic, minimalist pattern across the full viewport.

NNeel Mehta
86% match