Sol LeWitt

100%

✓ Published2🌍 Public

Last edited Dec 19, 2022

Created on Dec 19, 2022

This example recreates an abstract Sol LeWitt-inspired drawing using only DOM APIs. It shows a grid of thin horizontal and vertical bars overlaid with a circular mask, so the bars are visible only inside the circle. The code builds SVG elements dynamically with `document.createElementNS` and uses two SVG `<mask>` elements to define the visible region. Each bar is a `<rect>`; the horizontal set uses a mask that hides the center, while the vertical set uses an inverted mask, creating a subtle layered composition.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt combined

This example renders a generative art piece inspired by Sol LeWitt, displaying a grid of vertical black bars on a white background. A circular mask, defined via SVG’s `<mask>` element, restricts the bars to appear only within a centered circle, creating a stark, geometric contrast. The code uses raw JavaScript and SVG APIs (`document.createElementNS`, `setAttribute`) to construct the shapes dynamically, with the mask composed of a white rectangle and a black circle. The bar spacing and width are fixed by loop parameters, producing a repeating pattern across the full viewport.

NNico-Nico

91% match

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing using SVG masks to create a circular window into intersecting grids of vertical and horizontal bars. The code builds two complementary masks—one with a white background and black circle, the other inverted—so that vertical lines appear outside the circle while horizontal lines appear inside it. It uses raw DOM manipulation with `document.createElementNS` and D3’s `selection` import, and sizes the artwork responsively to the viewport dimensions.

SSantiago Toso

91% match

Loading thumbnail…

Reproduction of Sol LeWitt

This example recreates a Sol LeWitt-inspired drawing using only raw SVG and JavaScript, without any external libraries. It shows a circular mask revealing a grid of horizontal and vertical black bars over a white background. The code constructs the visualization by creating SVG elements dynamically, using two masks—one that exposes horizontal stripes inside a circle and another that reveals vertical stripes in the surrounding area. The result is a geometric pattern that mimics LeWitt’s wall drawings through simple DOM manipulation.

PPhan Nguyen

91% match

Loading thumbnail…

Sol Lewitt All Shapes

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

JJoel Wilson

90% match

Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using SVG, rendering 100 horizontal bars masked by a central circle. The code builds the visualization dynamically with the `document.createElementNS` API, creating a white rectangle and black circle to define the mask, then looping through the bars. Each bar is 10 pixels tall, spaced 20 pixels apart, and clipped by the `url(#circle-mask)` reference. The visualization fills the entire browser window, with the mask and bars sized based on `window.innerWidth` and `window.innerHeight`, producing a geometric composition of stripe-like shapes.

HHéloïse Feldmann

90% match

Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

JJun Alvarado

90% match

Loading thumbnail…

Sol Lewitt Reproduction

This visualization reproduces a Sol LeWitt-inspired drawing using nested SVG masks to create a circular window onto a grid of horizontal and vertical stripes. A white circle masked over black reveals colored horizontal bars, while a second inverted mask on a white background exposes vertical bars in the surrounding area. The code builds the SVG dynamically with `document.createElementNS`, configuring two `<mask>` elements and generating 100 rectangular stripes in each direction. The colors alternate through the default black fill, producing a stark geometric pattern that fills the browser viewport.

Nnicolekevans

89% match

Loading thumbnail…

Sol LeWitt

This visualization recreates a Sol LeWitt-inspired geometric drawing using pure SVG. It shows a grid of vertical and horizontal black lines intersecting across the full screen, but with their density inverted between the center and the periphery. In the middle, only horizontal lines appear in a circular region, while vertical lines dominate the surrounding area. The effect is achieved using two SVG masks—a peripheral mask and a center mask—that selectively reveal or hide the line sets. The code uses the native `document.createElementNS` API to construct SVG elements dynamically.

JJeya Balaji Balasubramanian

89% match