Sol LeWitt combined

100%

Sol LeWitt combined

✓ Published0🌍 Public

Last edited Jan 9, 2023

Created on Jan 9, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt vertical

This visualization presents a generative art piece inspired by Sol LeWitt's geometric style. It displays a series of vertical black bars distributed across the canvas, but the pattern is interrupted by a central circular region. The circle acts as a mask, selectively revealing or hiding portions of the bars within its radius. The code uses raw SVG and JavaScript, creating elements via `document.createElementNS`, setting a mask with a circle shape, and dynamically generating the bars in a loop. The display is adjusted to fill the browser window's dimensions.

NNico-Nico

94% match

Loading thumbnail…

Sol LeWitt horizontal

This example renders a generative art piece inspired by Sol LeWitt, composed of horizontal and vertical black bars that intersect within a circular area of the canvas. The visualization uses the raw DOM API `document.createElementNS` to construct SVG elements directly, applying two distinct masks (`circle-mask` and `circle-mask-2`) to confine the bars to a central circle and to create a crosshatch pattern. The page is built with HTML, CSS, and JavaScript, with the SVG sized to the full browser window and the Share Tech font loaded from Google Fonts.

NNico-Nico

93% match

Loading thumbnail…

Sol LeWitt

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.

JJMeltzer92

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

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

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

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

89% match