Fork of Sol LeWitt Reproduction with Javascript

100%

Fork of Sol LeWitt Reproduction with Javascript

✓ Published0🌍 Public

Last edited Feb 5, 2026

Created on Feb 5, 2026

This example reproduces a Sol LeWitt wall drawing as a generative SVG composition. It shows a series of vertical black bars covering the full height of the browser window, overlaid with horizontal black lines that step diagonally across the canvas. The code uses the Document API to create SVG elements, including nested `rect` and `circle` nodes, with two partially commented-out circle masks that would limit the drawing’s visible area. The piece dynamically sizes to the viewport, using a fixed 20-pixel spacing for vertical bars and a 10-pixel step for the diagonal lines.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art piece that reproduces a Sol LeWitt wall drawing using JavaScript and the Document Object Model (DOM) to create SVG elements. It shows a grid of horizontal and vertical lines, with a central circular region where the line pattern is inverted. The code uses a combination of SVG masks with white and black circles to control which sets of lines are visible in the center versus the rest of the canvas. The lines are drawn as rectangular strips, with spacing and stroke width derived from the browser window's dimensions.

SSalahAnwer-dev

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing by generating a grid-like pattern of horizontal and vertical bars on an HTML5 SVG canvas. It uses SVG masks to create a central circular window: one mask hides everything except a 200-pixel-radius circle, while a second mask inverts that region. The code dynamically creates 100 horizontal and 100 vertical rectangles, each layered with alternating masks to produce the distinctive visual effect. The piece adapts to the browser’s full window dimensions, demonstrating algorithmic art generation through direct DOM manipulation and SVG APIs without external libraries.

LLiam Connors

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using raw JavaScript and the SVG API. It generates a grid of horizontal and vertical stripes, masked by two inverse circular masks to create a composition of intersecting lines. The code directly creates SVG elements via `document.createElementNS`, setting attributes for rectangles and masks to control the visible pattern. The rendering is dynamic, adapting to the browser window's full width and height.

DDilara Bozkurt

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This generative art piece reproduces a Sol LeWitt wall drawing using pure JavaScript and the SVG API. It displays a grid of alternating horizontal and vertical stripes that intersect within central circular masks, creating a layered geometric pattern. The code constructs an SVG canvas with two circle masks—one revealing horizontal bars, the other vertical bars—overlaid to produce the final composition. No external libraries are used; all elements are created dynamically via `document.createElementNS` and styled with inline attributes.

Kktshim@snu.ac.kr

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art piece that recreates a Sol LeWitt wall drawing using SVG elements. It renders a full-screen grid of horizontal and vertical stripes, with a central circular area masked to show the horizontal lines while the surrounding area displays vertical lines. The code uses the SVG DOM API directly to create and manipulate `rect` and `circle` elements, along with `mask` definitions to control visibility. The pattern is generated programmatically across the entire canvas, with each stripe having a fixed width and height.

Ssenghok789@gmail.com

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using only JavaScript and the SVG API. A central circular mask reveals a grid of horizontal black lines in the center of the viewport, while a second inverted mask allows vertical black lines to appear only outside the same circle, creating a striking contrast. The code dynamically creates all SVG elements—including masks, rectangles, and circles—based on the browser window dimensions, generating 100 horizontal and 100 vertical stripes that intersect in a pattern defined by the two masks.

Mmagswo

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing as an interactive SVG canvas. It displays a central white circular mask over a field of 100 horizontal black stripes, with the circle acting as a window that reveals the full-width bars. The piece uses the SVG DOM API directly, creating a mask and rectangles via JavaScript, without any external styling. Each stripe is 10 pixels tall, and the composition fills the entire browser viewport, adapting to the window’s dimensions.

JJaga-droid

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s minimalist wall drawing as an interactive SVG composition. It generates a grid of alternating horizontal and vertical rectangles, with a circular mask revealing only the central region of the layered shapes. The code uses the DOM API’s `createElementNS` to construct SVG elements directly, setting attributes like `width`, `height`, and `mask` programmatically. No external libraries are required, and the rendering adapts to the full browser viewport, creating a stark black-and-white geometric pattern inspired by the artist’s systematic approach.

WWasanta Pruttisarikorn

90% match