Sole Devit

100%

✓ Published0🌍 Public

Last edited Feb 13, 2023

Created on Feb 13, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

sole lowit reproduction vertical

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.

Nnathananiel john agang

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…

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

81% match

Loading thumbnail…

SVG fundaments

This example reproduces a Sol LeWitt-inspired generative artwork using SVG fundamentals. It creates a full-viewport SVG canvas via the DOM API and renders two sets of striped rectangles—horizontal and vertical—that are selectively revealed through custom SVG masks. Two masks (`circle-mask` and `circle-mask-2`) use black and white rectangles with a centered white or black circle to create a circular cutout effect. The code demonstrates programmatic SVG element creation, attribute setting, and mask application without any external libraries, relying purely on raw JavaScript and SVG namespaces.

Ssahilraj3733m@gmail.com

81% match

Loading thumbnail…

DOM Manipulation

This example demonstrates how to dynamically create an SVG scene using only native JavaScript DOM manipulation methods, without any external libraries. It generates a grid of red and black rectangles, then applies a circular mask to reveal a striking circular composition at the center of the viewport. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements, including a mask, circle, and rects, with dimensions determined by the window size. The result is a minimalist, geometric pattern that highlights the power of direct SVG element creation and styling.

Cclara7227

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

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

Vvikrantbhurke

80% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG masking by layering a grid of horizontal and vertical rectangles over a circular cutout. The rectangles are created dynamically using the DOM API `document.createElementNS` with the SVG namespace. Two complementary masks, `circle-mask` and `circle-mask-2`, alternate between white and black fills to control visibility, producing a striped pattern inside the circle while keeping the surrounding area solid. The code relies on raw SVG manipulation rather than a visualization library, with only the `d3-selection` API imported but not actively used.

AAitorGD

80% match