mask test

100%

✓ Published0🌍 Public

Last edited Aug 18, 2025

Created on Aug 18, 2025

A generative art piece reproduces a Sol LeWitt-style composition using an SVG mask. The page creates a circular mask centered on the screen, filled with a black circle over a white rectangle. One hundred horizontal stripes, each 10 pixels tall, are drawn across the full viewport width and clipped by this mask, revealing the pattern only within the circle. The code uses native `document.createElementNS` to construct SVG elements, setting the `mask` attribute on each rectangle and a `circle-mask` definition.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt dos mascaras

This example generates a dynamic, Sol LeWitt-inspired abstract composition using an SVG mask API. Two masks invert visibility: the first reveals a circle of horizontal stripes, while the second displays vertical stripes within a donut-shaped region. The code uses pure JavaScript and the Document Object Model (DOM) to create SVG elements, including `<mask>`, `<circle>`, and `<rect>` tags, without any external libraries. Rendering relies on the viewport’s width and height to size the artwork, which appears as an interplay of masked rectangular stripes.

SSergio

86% match

Loading thumbnail…

Sol LeWitt Reproduction Mask

This visualization reproduces a Sol LeWitt art piece using a simple SVG mask to create a circular viewing window. It shows a series of horizontal black-and-white striped bars filling the entire screen, stopped by a central circular hole that reveals the full rectangle. The code builds an SVG via DOM manipulation, defines a mask containing a white rectangle and black circle, then appends 100 thin rect elements with the mask applied to create the striped pattern. The rendering relies on core SVG APIs and no external libraries.

AAndre J Denais

85% match

Loading thumbnail…

Sol LeWitt Platt - circle mask

This example creates a minimal Sol LeWitt-inspired drawing using raw SVG and JavaScript, rendering 100 horizontal stripe rectangles of 10-pixel height across the full viewport. A circular mask, defined via the SVG `<mask>` element with a white circle, clips the stripes into a central circular region at the screen’s midpoint. The code dynamically generates the SVG namespace elements (`document.createElementNS`) for the mask, circle, and rectangles, mimicking a generative art process with no external libraries. The result is a stark black-and-white composition that isolates the line pattern within the circle, referencing LeWitt’s geometric wall drawings.

NNatalia BM

85% match

Loading thumbnail…

Simple Sol Lewitt

This example generates a generative art composition inspired by Sol LeWitt using raw SVG and JavaScript. It draws 100 vertical and 100 horizontal stripes across the full viewport, using circular masks to create a central ring pattern where the two sets of stripes intersect. The code constructs SVG elements dynamically via the DOM API, applying the `mask` attribute with two different circle-based masks defined in `circle-mask` and `circle-mask2`. No external libraries are used; the rendering relies purely on native SVG primitives.

Aahavagowtham

85% match

Loading thumbnail…

Sol LeWitt

This example generates an abstract geometric composition inspired by Sol LeWitt, where horizontal and vertical striped bands form a cross-like pattern across the full screen. Two SVG `<mask>` elements define circular cutouts—one with a black background and white circle, the other inverted—so that the stripes alternate visibility through the center. The code builds 100 horizontal and 100 vertical rectangles via plain JavaScript DOM manipulation, setting each rectangle’s `mask` attribute to either `url(#circle-mask)` or `url(#circle-mask2)`. No external libraries are used; the rendering relies entirely on native SVG and CSS, with dynamic window dimensions set through `window.innerWidth` and `window.innerHeight`.

Llukasreber

84% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction mask

This example reproduces a Sol LeWitt-inspired geometric composition by drawing 100 horizontal stripes across the full browser window. A circular SVG mask, defined with a black circle over a white rectangle, reveals only the central region of the stripes, creating a circular vignette effect. The code constructs all elements dynamically using the raw Document Object Model (DOM) API, including `document.createElementNS` and `setAttribute`, without relying on external libraries. The mask and rectangles are appended directly to an SVG element sized to match the viewport dimensions.

Kkwambokar

84% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using two overlapping masks to create a circular interplay of horizontal and vertical stripes. The SVG canvas displays 100 horizontal bands and 100 vertical bands, each masked to reveal a clear circle in the center. The code constructs SVG elements programmatically, using `createElementNS` for the `rect` and `mask` nodes, and applies the masks via `url(#circle-mask)` and `url(#circle-mask-2)`. The piece demonstrates geometric abstraction through simple, repeating shapes and clipping.

CCurran Kelleher

84% match

Loading thumbnail…

Sol LeWitt Reproduction Mask Inverse

This example reproduces a Sol LeWitt art piece using an SVG mask to create an inverse circle effect. Horizontal black stripes are partially revealed through a circular mask centered on the canvas, while vertical stripes overlay the full height. The code constructs the SVG dynamically with JavaScript, creating 100 horizontal rectangles masked by a white circle on a black background, plus 100 unmasked vertical rectangles. It uses raw SVG APIs including `createElementNS`, `mask`, and `rect` elements, with no external libraries.

AAndre J Denais

83% match