Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction Vertical

✓ Published1🌍 Public
Nnreinig3@gatech.edu
Last edited Dec 4, 2023
Created on Dec 2, 2023

This example reproduces a Sol LeWitt-style drawing using only raw SVG and JavaScript. It shows a vertical stack of 100 horizontal rectangles whose visibility is restricted to a circular region centered on the screen. The code creates an SVG via the DOM API, defines a `<mask>` with a white background and a black circle, and applies that mask to each yellow rectangle. The result is a crisp geometric pattern of horizontal bands inside a circle, rendered entirely without external libraries or frameworks.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG and JavaScript. It presents a grid of horizontal and vertical stripes that intersect through two circular masks, creating a layered composition with a central white circular void and a black circular overlay. The code constructs SVG elements directly via the DOM API, including `rect` shapes and two custom `<mask>` definitions, to alternate stripe visibility. A total of 200 rectangles are generated programmatically, with no external libraries or frameworks, relying solely on browser-native SVG rendering to achieve the geometric effect.

GGbemiga Atolagbe
94% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

AAndre J Denais
93% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201
92% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using SVG, layering horizontal and vertical bands that are clipped by circular masks. The piece shows a 200-pixel radius circle centered on the canvas, where alternating stripes of a solid hue and the page background are exposed through two distinct mask configurations. The first mask reveals the horizontal bands within the circle, while the second reveals the vertical bands outside it, creating an optical interplay. The code uses JavaScript’s `document.createElementNS` to generate SVG elements, setting attributes like `width`, `height`, and `mask` directly on each shape.

MMonWas
92% match
Loading thumbnail…

Sol Lewitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing as a vertical sequence of horizontal stripes, clipped by a circular mask centered on the screen. It shows how generative geometry can create a minimalist composition directly in the browser. The code uses raw SVG APIs via `document.createElementNS` and `setAttribute` to construct 100 rectangles, each 10 pixels tall, spanning the full viewport width. A `mask` element with a white circle limits visibility, while the page fills the entire window with no margins or scrolling. The rendering approach is entirely procedural, using only vanilla JavaScript and SVG without external libraries.

Eelgato_1994
92% match
Loading thumbnail…

SOL LEWITT REPRODUCTION vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript. It shows a grid of thin horizontal and vertical rectangles intersecting over a central circle, created without external libraries or frameworks. The code uses `document.createElementNS` to build SVG `<rect>` elements inside two masks (`circle-mask` and `circle-mask-2`) to clip alternating stripes, with the circle radius fixed at 200 pixels. The rendering approach relies entirely on native DOM manipulation and SVG mask attributes, producing a clean, generative geometric pattern.

JJude-Clarke
92% 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
92% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG primitives and CSS masking, with no external data. It displays a grid of alternating horizontal and vertical stripes over the full viewport, clipped to reveal two overlapping circular forms at the center. The code builds SVG elements directly via the DOM API, creating 100 horizontal and 100 vertical rectangles. Two SVG masks—one inverting the other—combine to produce the layered visual effect, while d3 is listed as a dependency but not used in the logic.

NNikki Masroor
92% match