Skip to main content
SimilarExport ZIP
100%

create mask

✓ Published1🌍 Public
AAkshay
Last edited Nov 17, 2022
Created on Nov 17, 2022
Forked from horizontal lines

This example uses an SVG mask to create a circular window over a series of alternating horizontal rectangles. The mask, defined with an SVG `<mask>` element containing a white circle, is applied to each of the 100 rectangles via the `mask` attribute. The visualization demonstrates how SVG masks work in a bare-bones HTML page using vanilla JavaScript, dynamically creating the SVG elements and filling the viewport.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

circle mask

A full-screen SVG displays 100 horizontal stripes alternating in height across the viewport, with a circular mask revealing only the central region. The mask is defined as an SVG `<mask>` containing a white rectangle and a black circle, applied to each stripe via the `mask` attribute. The visualization uses raw DOM manipulation with `document.createElementNS` and `setAttribute` to construct the SVG elements dynamically in JavaScript, without any external libraries.

AAkshay
87% match
Loading thumbnail…

svg circle

This example renders 100 horizontal rectangles on an SVG canvas, with a circular mask applied so only the area inside a 200-pixel-radius circle centered on the screen is visible. The rectangles are spaced every 20 pixels vertically, each 10 pixels tall and spanning the full window width. The code creates the SVG elements using the native `document.createElementNS` API, building a mask containing a white circle and attaching it to each rectangle via the `mask` attribute. The visualization demonstrates basic SVG masking and procedural element creation in a browser environment.

TTehran Mammadov
87% match
Loading thumbnail…

beginner svg

This example demonstrates a simple masking effect in SVG, where a set of horizontal stripes is revealed only through a circular window at the center of the viewport. The visualization uses plain SVG elements created dynamically via the `document.createElementNS` method. A white rectangle serves as the mask base, while a black circle defines the transparent region, and the stripes are drawn as individual `rect` elements with the mask applied. The code runs without any external libraries, relying purely on native browser APIs and JavaScript.

TTehran Mammadov
85% match
Loading thumbnail…

inverse masking done

This example demonstrates inverse masking with SVG, where intersecting horizontal and vertical striped rectangles reveal a circular cutout at the center. Two masks are defined: one with a white circle on a transparent background, and another with a black circle over a white rectangle. The code builds 100 horizontal and 100 vertical rectangle strips, applying each mask to create a cross-hatch effect where the circle appears transparent. It uses plain JavaScript to manipulate SVG elements directly, with the `<mask>` element and `url(#...)` references controlling visibility.

AAkshay
85% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

MMichael Bell
84% match
Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com
83% match
Loading thumbnail…

Learn D3

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

MMark Christian
83% match
Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

EErik L
83% match