Skip to main content
SimilarExport ZIP
100%

sole lowit reproduction vertical

✓ Published0🌍 Public
Nnathananiel john agang
Last edited Aug 21, 2024
Created on Aug 19, 2024

A full-screen SVG composition displays 100 horizontal black rectangles layered vertically, with a circular mask revealing only a centered 200-pixel-radius region defined by white and black mask shapes. The code dynamically generates the SVG via the Document Object Model (DOM) `createElementNS` API, setting the mask’s rectangle and circle to control visibility. Each rect is assigned the mask using the `url(#circle-mask)` reference, creating a bold, striped window effect against a white background. The example demonstrates procedural SVG shape construction and masking without external libraries, relying purely on native browser APIs.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

sole lowit reproduction vertical

This example generates a full-screen SVG graphic consisting of one hundred vertical rectangles, each ten pixels wide, positioned side-by-side across the viewport. The rectangles extend the entire height of the browser window, creating a uniform striped pattern. The visualization is built using the Document Object Model (DOM) API to create SVG elements, specifically `document.createElementNS` with the SVG namespace, and sets attributes such as `x`, `width`, and `height` directly on each `rect` element.

Nnathananiel john agang
87% match
Loading thumbnail…

Sole Devit

This example uses raw SVG and DOM manipulation in JavaScript to create a striped composition with a circular cutout. A mask containing a black circle reveals vertical black rectangles across a white background, producing a lens-like effect. The code creates SVG elements directly without any library, instead relying on `document.createElementNS` and attribute setters. The 100 rectangles are evenly spaced, while the mask defines the visible circular region at the center of the canvas.

MMarc Brüssel
83% match
Loading thumbnail…

HTML Starter

This example demonstrates a Sol LeWitt-inspired geometric composition rendered entirely in SVG. It shows a circular mask revealing a series of horizontal stripes across the full viewport. The code creates the mask using a white rectangle and a black circle, then draws 100 rectangles, each 20 pixels apart, applying the mask via the `url(#circle-mask)` reference. The implementation uses vanilla JavaScript DOM manipulation with `createElementNS` and `setAttribute`, avoiding any external libraries. The visualization is static, with the masked stripes forming the central visual effect against a clean, margin-free background.

Ffsenchyna@gmail.com
81% match
Loading thumbnail…

Fork of sole lowit reproduction

This example demonstrates a straightforward technique for populating an SVG canvas with vertical rectangles. The code creates 100 `<rect>` elements, each with a fixed width of 10 pixels, and positions them horizontally by incrementing their x-coordinate by 20 pixels for every iteration. The rectangles span the full height of the viewport, creating a striped pattern. It uses JavaScript to programmatically construct the SVG via the `document.createElementNS` API, setting the `width` and `height` attributes dynamically based on the browser window's inner dimensions. The rendering uses only basic shapes without any external libraries.

Nnathananiel john agang
81% match
Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style vertical composition, displaying 100 horizontal stripes that are visible only within a circular region at the center of the screen. The piece shows how a simple geometric pattern can be masked to create a focused, minimalist art aesthetic. The code uses the SVG DOM API via `document.createElementNS` to construct elements directly, with a `<mask>` element and a white `<circle>` defining the visible area. Black `<rect>` elements of varying heights are generated in a loop and apply the mask using the `url(#circle-mask)` attribute, all rendered across the full browser viewport.

CCurran Kelleher
80% match
Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31
80% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing entirely with SVG shapes, using two circular masks to create a layered grid of horizontal and vertical lines. A black-and-white mask limits the first set of 100 horizontal rects to a centered circle, while an inverted mask applies 100 vertical rects to the surrounding area. The code builds the scene dynamically via the DOM API (`createElementNS`, `setAttribute`), populating the SVG canvas across the full window size. No external libraries are used, relying purely on native SVG masking and rectangle elements.

Iinnocent thomas
80% match
Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

PPrince Kumar
79% match