Skip to main content
SimilarExport ZIP
100%

Sol Lewitt

✓ Published0🌍 Public
GGazzrant
Last edited May 10, 2022
Created on May 10, 2022

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

Vvikrantbhurke
89% 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 a Sol LeWitt-inspired geometric drawing using SVG. A series of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart, render across the full screen width. A circular mask centered on the viewport clips these rectangles, revealing only the lines inside the circle. The visualization uses plain JavaScript to create SVG elements dynamically, with no external libraries, and responds to the browser window’s dimensions for sizing.

Ttonkocorp
88% match
Loading thumbnail…

Sol Lewitt

This generative visualization creates a geometric pattern inspired by Sol LeWitt’s wall drawings, using only SVG and JavaScript without external libraries. It overlays two sets of 100 rectangular stripes—vertical and horizontal—onto a full-screen canvas. A circular mask isolates a centered ring where horizontal stripes are inverted, while a second mask carves a solid white circle ring from the vertical stripes. The result is a repeating grid whose central region shifts contrast, producing an optical interplay of lines and negative space.

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

Sol Lewitt

This example renders a full-screen SVG composed of one hundred vertical rectangles, each ten pixels wide, spaced twenty pixels apart. The rectangles are created programmatically using the native Document Object Model API, with `document.createElementNS` and `setAttribute` to construct each SVG `rect` element. The `window.innerWidth` and `window.innerHeight` properties define the canvas dimensions, while the fixed loop count determines the layout. The result is a minimalist, grid-like pattern inspired by Sol LeWitt’s geometric wall drawings, though no data source or interaction drives the composition.

BBaptPoi
87% match