Sol LeWitt dos mascaras

100%

Sol LeWitt dos mascaras

✓ Published2🌍 Public

Last edited Sep 2, 2025

Created on Sep 2, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Ddalia.miliauskaite@me.com

86% match

Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Aainhoadieruiz@gmail.com

86% match

Loading thumbnail…

Sol Le Witt Vertical

This example generates an abstract, Sol LeWitt-inspired visual composition using only SVG and JavaScript. It creates two circular masks via the SVG `mask` element, and draws a grid of horizontal and vertical rectangles that are selectively revealed through each mask. The first mask shows a series of horizontal lines inside a black circle, while the second shows vertical lines outside a white circle, creating a layered, geometric contrast. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the document, with dimensions tied to the full window size.

SShannon Teoh

86% match

Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie

86% match

Loading thumbnail…

mask test

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.

SSergio

86% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using SVG, layering horizontal and vertical bands that are clipped by circular masks. The piece shows a 200-pixel radius circle centered on the canvas, where alternating stripes of a solid hue and the page background are exposed through two distinct mask configurations. The first mask reveals the horizontal bands within the circle, while the second reveals the vertical bands outside it, creating an optical interplay. The code uses JavaScript’s `document.createElementNS` to generate SVG elements, setting attributes like `width`, `height`, and `mask` directly on each shape.

MMonWas

85% match

Loading thumbnail…

Sol LeWitt

This example recreates an abstract Sol LeWitt-inspired drawing using only DOM APIs. It shows a grid of thin horizontal and vertical bars overlaid with a circular mask, so the bars are visible only inside the circle. The code builds SVG elements dynamically with `document.createElementNS` and uses two SVG `<mask>` elements to define the visible region. Each bar is a `<rect>`; the horizontal set uses a mask that hides the center, while the vertical set uses an inverted mask, creating a subtle layered composition.

JJMeltzer92

85% match