Sol LeWitt 2

100%

✓ Published1🌍 Public

Last edited Mar 30, 2025

Created on Mar 30, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewit reproduction

This example reproduces a Sol LeWitt-style geometric drawing by generating a grid of horizontal and vertical lines in pure SVG. It uses two SVG masks (`circle-mask` and `circle-mask-2`) to constrain the lines: the first mask allows the 100 horizontal strips to appear only inside a central white circle, while the second mask shows vertical strips outside that circle. The code builds all elements dynamically via the SVG DOM API (`createElementNS`), with no external libraries, and the result is a minimalist composition of intersecting, masked line bands against a blank background.

AAshwani Sajwan

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

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…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

IIndranil Biswas

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

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing entirely with SVG shapes, using two circular masks to create a layered grid of horizontal and vertical lines. A black-and-white mask limits the first set of 100 horizontal rects to a centered circle, while an inverted mask applies 100 vertical rects to the surrounding area. The code builds the scene dynamically via the DOM API (`createElementNS`, `setAttribute`), populating the SVG canvas across the full window size. No external libraries are used, relying purely on native SVG masking and rectangle elements.

Iinnocent thomas

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

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