Le Witt - Masks

100%

Le Witt - Masks

✓ Published1🌍 Public

Last edited Dec 23, 2022

Created on Dec 23, 2022

This piece generates an abstract composition inspired by Sol Le Witt, using overlapping black grid lines and circular forms defined entirely by SVG masks. It renders a full-screen canvas of vertical and horizontal bars spaced at 20-pixel intervals, with the intersections selectively revealed through two mask definitions that combine white and black shapes. The visualization is built with vanilla JavaScript and SVG DOM manipulation, creating masks via `createElementNS` and applying them through the `mask` attribute on each rectangle, resulting in a dynamic interplay of line and void.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

[D3] Le Witt - Masks with Symbols

This example generates a dynamic geometric composition inspired by Sol LeWitt, where alternating vertical and horizontal stripes are clipped by two overlapping circular masks. Using D3.js version 6 in a React-free SVG environment, the code defines two masks with inverted fills, then applies them to striped rectangles created via `d3.range` and `d3.join`. The result is a clean, monochrome interplay of lines and shapes, rendered purely with SVG elements on a full-window canvas.

WWRCIECH

88% match

Loading thumbnail…

so Le Witt

This generative art piece uses SVG masks, rectangles, and paths to create an intricate visual composition inspired by Sol LeWitt. The code builds a hundred horizontal and vertical striped rectangles, each with a skew transformation applied via CSS, while two SVG masks circle around a custom path to selectively reveal and conceal the pattern. Built with vanilla JavaScript and the SVG DOM API, the artwork demonstrates how basic shapes, masks, and CSS transforms can produce complex geometric arrangements without external libraries.

Kkasem1234357

87% match

Loading thumbnail…

advancement sol lewit

This example shows a geometric composition inspired by Sol LeWitt's wall drawings. It creates two circular masks overlaid on a grid of thin rectangles. A series of horizontal bars are clipped to a central white circle, while vertical bars outside that circle are shown through an inverse mask. The result is a crosshatched pattern that reverses direction at the boundary of the inner disk. The piece uses raw SVG manipulation via the DOM API, constructing elements with `createElementNS` and applying `mask` attributes to control visibility.

HHéloïse Feldmann

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…

[D3] Le Witt - Masks

This example creates a geometric composition of thin vertical and horizontal stripes that cross to form a mask-like circular pattern. Two SVG masks—one revealing a filled circle and another showing a circle cut out of a full rectangle—control the visibility of the stripes, which are generated as rectangles using D3's `range` and `join`. The visualization uses `d3.select`, `.append`, and `.attr` within a React framework, rendering entirely as SVG with D3 v6.

WWRCIECH

84% match

Loading thumbnail…

Sol LeWitt combined

This example renders a generative art piece inspired by Sol LeWitt, displaying a grid of vertical black bars on a white background. A circular mask, defined via SVG’s `<mask>` element, restricts the bars to appear only within a centered circle, creating a stark, geometric contrast. The code uses raw JavaScript and SVG APIs (`document.createElementNS`, `setAttribute`) to construct the shapes dynamically, with the mask composed of a white rectangle and a black circle. The bar spacing and width are fixed by loop parameters, producing a repeating pattern across the full viewport.

NNico-Nico

84% match

Loading thumbnail…

LeWitt Recreation w/ JS & SVG

A minimalist digital recreation of Sol LeWitt's geometric wall drawings uses JavaScript and SVG to layer a grid of black rectangles over a large white circle and a contrasting white rectangle over a black circle, with two SVG masks controlling visibility. The code constructs all shapes dynamically via DOM creation methods like `createElementNS` and `setAttribute`, requiring no external libraries, and renders at full window dimensions. The masks invert the patterns, producing an interplay of intersecting horizontal and vertical lines across the canvas.

MMarvin Frede

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

83% match