Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Sol LeWitt Reproduction Vertical Inverst

✓ Published1🌍 Public
WWasanta Pruttisarikorn
Last edited Nov 23, 2022
Created on Nov 23, 2022

This example generates an abstract geometric composition by layering horizontal and vertical bars over a full-screen SVG canvas. A circular mask and its inverse are created using the SVG `mask` element, with the first mask revealing horizontal strips in the central circle and the second exposing vertical strips outside it. The code uses the DOM API `createElementNS` to construct SVG elements dynamically, setting attributes like `width`, `height`, and `mask` via `setAttribute`. No external libraries are used; all shapes are drawn procedurally in a loop with 100 iterations per orientation.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example recreates a Sol LeWitt–inspired geometric composition using only SVG primitives and masking, showing a grid of thin vertical and horizontal bars that intersect to form a central circular void. The work emphasizes the contrast between ordered line work and negative space, creating a pseudo-visualization that mimics algorithmic drawing without encoding external data. The code relies on the raw DOM APIs `document.createElementNS` and `setAttribute` to construct the SVG elements, while two `<mask>` definitions with inverted fills (white background with black circle, black background with white circle) selectively reveal the vertical strokes inside the circle and the horizontal strokes outside it. No external libraries are used; the font is loaded via Google Fonts’ “Share Tech” for the text styling.

Ccome.grant@gmail.com
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s minimalist wall drawing as an interactive SVG composition. It generates a grid of alternating horizontal and vertical rectangles, with a circular mask revealing only the central region of the layered shapes. The code uses the DOM API’s `createElementNS` to construct SVG elements directly, setting attributes like `width`, `height`, and `mask` programmatically. No external libraries are required, and the rendering adapts to the full browser viewport, creating a stark black-and-white geometric pattern inspired by the artist’s systematic approach.

WWasanta Pruttisarikorn
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG. It shows a series of 100 horizontal bars, each 10 pixels tall and spaced 20 pixels apart, filling the entire window. A circular mask clips the bars so that only the area inside a centered circle of radius 200 pixels is visible, creating the artwork’s distinctive striped disc. The code creates SVG elements programmatically via the DOM API, using `createElementNS` and `setAttribute` to build the mask and rectangles without any external libraries.

SShahin Alam
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing by generating a grid-like pattern of horizontal and vertical bars on an HTML5 SVG canvas. It uses SVG masks to create a central circular window: one mask hides everything except a 200-pixel-radius circle, while a second mask inverts that region. The code dynamically creates 100 horizontal and 100 vertical rectangles, each layered with alternating masks to produce the distinctive visual effect. The piece adapts to the browser’s full window dimensions, demonstrating algorithmic art generation through direct DOM manipulation and SVG APIs without external libraries.

LLiam Connors
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using raw SVG and JavaScript, rendering a canvas-sized circular mask layered over intersecting horizontal and vertical bands. The page builds an SVG scene with two circle masks: one reveals a grid of horizontal rectangles, while an inverse mask exposes vertical rectangles, creating a Moiré-like pattern. The code constructs elements via the DOM API (`document.createElementNS`, `setAttribute`) and appends them to the SVG root, with masks defined as `<mask>` elements containing `<rect>` and `<circle>` shapes. No external libraries are used; all rendering relies on native SVG primitives and inline styling.

Ttwospikesfpg@gmail.com
90% match
Loading thumbnail…

Fork of Sol Lewitt Vertical

This example reproduces Sol LeWitt’s *Vertical* art piece using two SVG masks to interleave horizontal and vertical black bars. A circular mask reveals the horizontal bars inside the circle while hiding them outside, and a complementary mask reveals the vertical bars only outside the circle. The code builds the SVG directly with the Document Object Model (DOM) API, creating 100 rectangles at 20-pixel intervals across a 600×500 canvas. The result is a clean, geometric pattern that contrasts dense line grids with an empty circular void.

FFrancisco Ibelles
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG and JavaScript, creating a grid of alternating horizontal and vertical bands. Two circular masks reveal the layered strokes: the first mask exposes vertical strips within a centered circle, while the second inverts that region to show horizontal strips outside it. The code generates 100 rectangles per direction, each 10 pixels thick, using the `document.createElementNS` API and SVG `mask` elements to compose the visual interplay. The result is a clean, geometric abstraction that mimics the artist’s instructional art style.

Mmavercikalvin
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction generates an abstract, grid-based composition entirely with SVG elements. It shows a central circular mask that reveals alternating horizontal and vertical stripes across the full screen. The code creates two masks—one with a black background and white circle, another with a white background and black circle—to control which stripes are visible. It uses the raw SVG DOM API via `document.createElementNS` to draw 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks applied to create the overlapping circle effect. No external libraries are used; only native JavaScript and SVG.

KKusumaKumariDama@my.unt.edu
90% match