Sol Lewitt in Vanilla JS Project Attempt #1

100%

Sol Lewitt in Vanilla JS Project Attempt #1

✓ Published1🌍 Public

Last edited Sep 8, 2025

Created on Aug 12, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

CCasualWanderer20XX

90% match

Loading thumbnail…

Sol LeWitt Attempt #5 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.

CCasualWanderer20XX

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

88% match

Loading thumbnail…

Sol Lewitt Vanilla JS Project Attempt #2

This example generates an interactive Sol LeWitt-inspired drawing using only native JavaScript and SVG APIs, without external libraries. It shows a grid of thin horizontal and vertical lines across the full browser viewport, masked by two circles at the center. The first mask reveals horizontal bars within a dark circle, while the second mask inverts the effect for vertical bars in a contrasting ring, creating a crosshatched circular pattern that stands out against the plain background. The code creates elements dynamically via `document.createElementNS` and applies masks (`circle-mask`, `circle-mask-2`) to clip the repeated rectangles.

CCasualWanderer20XX

88% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

88% match

Loading thumbnail…

Sol LeWitt Vanilla JavaScript

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Ppeter@attachmentdivision.com

87% match

Loading thumbnail…

Sol Lewitt Piece

This example reproduces a Sol LeWitt-style drawing using only JavaScript and the Document Object Model (DOM). It generates a full-screen SVG canvas and fills it with 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, creating a rhythmic, wall-like grid pattern. The code uses `document.createElementNS` to construct SVG elements directly, without any external libraries, and sets the canvas dimensions to the browser window’s inner width and height. The rendering is purely algorithmic, based on a loop that iterates through horizontal positions, with no external data source.

Yyejichun@naver.com

87% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example recreates Sol LeWitt’s geometric wall drawings using only vanilla JavaScript and SVG, with no external libraries. It generates a series of lines and shapes directly in the DOM via `document.createElementNS` to build an SVG canvas. The code demonstrates manual SVG construction by creating a root `svg` element, appending a background `rect`, and drawing minimal geometric forms. It highlights fundamental browser APIs for creating and manipulating SVG elements without D3’s helper functions.

TTobi Olabode

87% match