Skip to main content
SimilarExport ZIP
100%

advancement sol lewit

✓ Published1🌍 Public
HHéloïse Feldmann
Last edited May 5, 2023
Created on May 5, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing using SVG masks to create a circular window into intersecting grids of vertical and horizontal bars. The code builds two complementary masks—one with a white background and black circle, the other inverted—so that vertical lines appear outside the circle while horizontal lines appear inside it. It uses raw DOM manipulation with `document.createElementNS` and D3’s `selection` import, and sizes the artwork responsively to the viewport dimensions.

SSantiago Toso
88% 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
87% 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
87% 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
87% match
Loading thumbnail…

Sol Lewitt Reproduction

This visualization reproduces a Sol LeWitt-inspired drawing using nested SVG masks to create a circular window onto a grid of horizontal and vertical stripes. A white circle masked over black reveals colored horizontal bars, while a second inverted mask on a white background exposes vertical bars in the surrounding area. The code builds the SVG dynamically with `document.createElementNS`, configuring two `<mask>` elements and generating 100 rectangular stripes in each direction. The colors alternate through the default black fill, producing a stark geometric pattern that fills the browser viewport.

Nnicolekevans
87% match
Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

JJun Alvarado
87% 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
87% match