Fork of Sol LeWitt reproduction

100%

Fork of Sol LeWitt reproduction

✓ Published0🌍 Public

Last edited Jan 6, 2024

Created on Jan 6, 2024

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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG elements. It generates 100 vertical rectangles, each 10 pixels wide, that span the full height of the viewport. A circular mask, centered on the screen with a 200-pixel radius, limits the visible portion of these bars, creating a clean, geometric composition. The code uses the SVG `mask` element and dynamically creates rectangles and the circle via standard DOM APIs, with no external libraries or data sources.

Ssariyya-abdullayeva

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

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG and JavaScript, creating a grid of alternating horizontal and vertical bands. Two circular masks reveal the layered strokes: the first mask exposes vertical strips within a centered circle, while the second inverts that region to show horizontal strips outside it. The code generates 100 rectangles per direction, each 10 pixels thick, using the `document.createElementNS` API and SVG `mask` elements to compose the visual interplay. The result is a clean, geometric abstraction that mimics the artist’s instructional art style.

Mmavercikalvin

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG. A circular mask reveals a set of horizontal, evenly spaced rectangles that span the full width of the viewport, creating a striped pattern confined to a central circle. The code constructs the SVG dynamically via the `document.createElementNS` API, setting the mask’s circle radius to 200 pixels and drawing 100 rectangles at 20-pixel intervals with 10-pixel heights. No external libraries are used; the rendering relies entirely on native browser SVG elements and attributes.

Mmatrice-one

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

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt–style geometric drawing using raw SVG and JavaScript. It displays a grid of alternating horizontal and vertical stripes that are revealed through two circular mask regions at the center of the canvas. The code creates an SVG element, defines two mask layers—one with a white circle on black and another with a black circle on white—and appends 100 horizontal and 100 vertical rectangles. Each rectangle is clipped by one of the masks, producing the contrasting stripe pattern without any external libraries.

Nnim@brejnholt.dk

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction renders a minimalist geometric composition using raw SVG and the DOM API. It shows a circular mask centered on the viewport, with a white outer ring and black inner circle, through which 100 horizontal striped rectangles are displayed. Each rectangle is created with `document.createElementNS`, assigned a fixed height and y-position, and clipped using an SVG `mask` element. The piece relies entirely on JavaScript and SVG primitives rather than any external libraries or datasets.

Zzaioris

91% match