Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Platt - circle mask

✓ Published0🌍 Public
NNatalia BM
Last edited Jan 18, 2026
Created on Jan 18, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Sol LeWitt

This example reproduces Sol LeWitt’s geometric art using an SVG rendering approach. It displays a grid of horizontal and vertical stripes, but only within a circular region at the center of the screen. The code creates SVG masks, specifically `circle-mask` and `circle-mask2`, to clip two sets of 100 rectangle elements. The first set uses a white-on-black mask for horizontal stripes, while the second uses a black-on-white mask for vertical stripes, producing a clean, intersecting pattern. The canvas automatically scales to the full window dimensions.

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

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using SVG and JavaScript. A circular mask isolates a group of horizontal stripes, while un-masked vertical lines extend across the full canvas. The code generates 100 horizontal rectangles with a set height and 100 vertical rectangles, positioning them in a grid pattern via the `createElementNS` API. The mask, defined with a `circle` element, limits the horizontal stripes to a central circular region, creating a subtle intersection effect between the two sets of lines.

AArnulfotos
87% match
Loading thumbnail…

Sol LeWitt Reproduction

A minimalist web reproduction of Sol LeWitt’s geometric wall drawings, rendered as layered horizontal and vertical stripes in SVG. A circular mask isolates the intersection of the two sets of lines, creating a focal point against a full-screen canvas. The code constructs SVG elements programmatically via the DOM API, using two masks (`circle-mask` and `circle-mask-2`) and nested rects to alternate visible segments. It employs no external libraries, relying purely on native browser methods like `createElementNS` and `setAttribute` to draw 100 stripes in each direction.

Rrune@noergaard.dk
87% match
Loading thumbnail…

Sol LeWitt 2

This example creates a generative, Sol LeWitt-inspired drawing using SVG masks to combine horizontal and vertical line grids into a circular composition. A large circle is used in two complementary mask definitions, `circleMask` and `circleMask2`, to reveal a set of 100 horizontal strips and a second set of 100 vertical strips. The first mask shows the horizontal lines within the circle while hiding the background, and the second mask does the opposite for the vertical lines, creating a crosshatched effect that only appears in the overlapping circular area. The code builds all SVG elements dynamically using the `createElementNS` API.

CCora
87% match
Loading thumbnail…

Sol LeWitt Horizontal Cirle

A web page renders a dynamic, mask-based homage to Sol LeWitt's geometric art. The visualization displays a central circle composed of horizontal and vertical striped bands, created using SVG elements and CSS mask compositing. It draws 100 horizontal rectangles masked by a circular region, and 100 vertical rectangles masked by an inverse circle, all generated procedurally with JavaScript. The `document.createElementNS` API constructs SVG nodes, while `mask` and `circle` elements define the visible shape, resulting in a crisp, monochrome pattern that fills the browser viewport.

Eeric.r.thornhill@gmail.com
87% 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