so Le Witt

100%

✓ Published0🌍 Public

Last edited Jun 13, 2022

Created on Jun 12, 2022

This generative art piece uses SVG masks, rectangles, and paths to create an intricate visual composition inspired by Sol LeWitt. The code builds a hundred horizontal and vertical striped rectangles, each with a skew transformation applied via CSS, while two SVG masks circle around a custom path to selectively reveal and conceal the pattern. Built with vanilla JavaScript and the SVG DOM API, the artwork demonstrates how basic shapes, masks, and CSS transforms can produce complex geometric arrangements without external libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Le Witt - Masks

This piece generates an abstract composition inspired by Sol Le Witt, using overlapping black grid lines and circular forms defined entirely by SVG masks. It renders a full-screen canvas of vertical and horizontal bars spaced at 20-pixel intervals, with the intersections selectively revealed through two mask definitions that combine white and black shapes. The visualization is built with vanilla JavaScript and SVG DOM manipulation, creating masks via `createElementNS` and applying them through the `mask` attribute on each rectangle, resulting in a dynamic interplay of line and void.

WWRCIECH

87% match

Loading thumbnail…

SoLeWitt exercise

This generative art piece recreates a Sol LeWitt wall drawing by combining horizontal and vertical striped rectangles with masked geometric shapes. The SVG output uses D3.js selectors and joins to construct a grid of 100 lines in each direction, while custom mask definitions contain large star-like symbols rendered via D3’s `symbol` API. The masks alternate positive and negative space, creating an interlocking pattern of stripes and forms across the full canvas. The piece is fully responsive, scaling to the browser window’s dimensions.

CC-Marfil

85% match

Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie

84% match

Loading thumbnail…

Sol LeWitt

This example renders a generative SVG artwork inspired by Sol LeWitt. It uses raw JavaScript to create an SVG element sized to the browser window, then draws 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the canvas. A circular mask, defined in SVG and applied via the `mask` attribute, clips these rectangles, revealing a bold, striped disk centered on the screen. The piece demonstrates programmatic shape creation and SVG masking without any external libraries.

Bbillzhou2005

84% match

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing by generating a grid of horizontal and vertical stripes that intersect across the full browser window. Two SVG masks create a central circular aperture: the first mask reveals the horizontal stripes inside the circle, while the second reveals vertical stripes outside it, producing a clean compositional contrast. The page builds the SVG programmatically using vanilla JavaScript and the DOM API, with no external libraries. The code sets element dimensions from `window.innerWidth` and `window.innerHeight`, ensuring the artwork adapts to the viewport.

Ggrassfluffy02

83% match

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

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

83% match

Loading thumbnail…

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Ggrassfluffy02

82% match