Vert of SOl LeWitt (TB)

100%

Vert of SOl LeWitt (TB)

✓ Published0🌍 Public

Last edited Feb 6, 2023

Created on Feb 6, 2023

This example shows a grid of horizontal red and white stripes, but only inside a circular mask centered on the screen. The stripes extend across the full canvas, while the mask limits their visibility to a 200-pixel-radius circle. The code builds an SVG scene using `document.createElementNS`, creating 100 `rect` elements with a fixed height and vertical spacing. A `mask` containing a single `circle` element applies the clipping effect, and all rectangles reference the mask via the `mask` attribute. No data source is used; the visualization is purely generative.

AI-generated description

A demo 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

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

85% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition as a vertical grid of alternating vertical and horizontal stripes. It shows a structured visual pattern where two circular masks define regions of overlap, creating a cross-shaped interplay of lines. The rendering uses plain SVG elements—`rect` and `circle`—with two custom masks (`circle-mask` and `circle-mask-2`) to control which stripes appear in each area. The code dynamically generates 100 vertical and 100 horizontal rectangles, each styled with a distinct mask, to achieve the final layered effect. No external libraries are used; the visualization relies solely on native SVG and JavaScript.

Mmaciekawsq@gmail.com

84% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style vertical composition, displaying 100 horizontal stripes that are visible only within a circular region at the center of the screen. The piece shows how a simple geometric pattern can be masked to create a focused, minimalist art aesthetic. The code uses the SVG DOM API via `document.createElementNS` to construct elements directly, with a `<mask>` element and a white `<circle>` defining the visible area. Black `<rect>` elements of varying heights are generated in a loop and apply the mask using the `url(#circle-mask)` attribute, all rendered across the full browser viewport.

CCurran Kelleher

84% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s geometric wall drawing style by generating a grid of horizontal and vertical black stripes on a white background. A circular mask in the center of the SVG reveals only the stripes inside the circle, while a second inverted mask applies to the vertical lines, creating a layered crosshatch effect. The code uses raw SVG elements created via the DOM API (`document.createElementNS`), with two mask definitions (`<mask>` and `<mask2>`) to control visibility. The rendering is entirely procedural, with 100 rectangles in each direction, and no external data source or library beyond vanilla JavaScript and SVG.

Aalexscott-untitled

83% match

Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31

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

83% match

Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

PPrince Kumar

83% match