Sol Lewitt Circle

100%

Sol Lewitt Circle

✓ Published0🌍 Public

Last edited Aug 30, 2023

Created on Aug 30, 2023

Full-screen SVG masks create a circular window that reveals intersecting vertical and horizontal striped rectangles, based on Sol Lewitt’s wall drawings. The code constructs two masks—one with a white circle on black and another with a black circle on white—then applies them to 100 vertical and 100 horizontal rectangles using `createElementNS` and `setAttribute`. This renders a geometric pattern where the circle area shows colored bands while the surrounding background remains empty.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Sol LeWitt

This visualization recreates Sol LeWitt’s geometric wall drawings using overlapping horizontal and vertical striped bands. A central circular mask reveals the intersection of both patterns, while the surrounding areas remain blank. The code builds SVG elements manually with `createElementNS`, applying two separate circle-based masks to clip groups of thin rectangles. No external libraries are used; rendering relies entirely on raw SVG masks and rect primitives at a fixed 100-line count per direction.

Ddanheavern

88% match

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge

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

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

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

This example generates a striped pattern of 100 horizontal rectangles that cover the full width of the viewport, creating a simple optical art effect. A circular SVG mask is defined with a black circle, though the mask is not applied to the rectangles in the code. The visualization uses raw SVG APIs—`document.createElementNS` for elements and `setAttribute` for properties—rather than a library, producing an abstract, minimalist composition inspired by Sol LeWitt’s wall drawings.

GGazzrant

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

87% match