svg mask

100%

✓ Published1🌍 Public

Last edited Feb 9, 2023

Created on Feb 9, 2023

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

SVG and Javascript

This example demonstrates how SVG masks can dynamically composite shapes to create an intricate visual pattern. Two circular masks—one black and one white—are layered with alternating sets of thin rectangular stripes, generating a crosshatched grid that reveals or hides sections of the canvas. The code uses raw JavaScript DOM manipulation with `document.createElementNS` to build SVG elements dynamically, computing positions based on `window.innerWidth` and `window.innerHeight`. No external libraries are employed; the rendering relies entirely on native SVG mask and rectangle elements.

GGiacomo Rossoni

87% match

Loading thumbnail…

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Sscheenmi@gmail.com

86% 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…

svg fund

A grid of 100 thin horizontal rectangles spans the full width of the viewport, but a circular mask reveals only the central portion of this striped pattern. The visualization demonstrates how SVG masks work by layering a white circle on a black background to selectively hide or show the underlying marks. Built with D3’s `select`, `range`, and `join` methods, the code appends rectangles with a shared `mask` attribute, then constructs the mask using SVG `mask` and `circle` elements. The data is a simple sequential range, and the circle is centered at half the window’s dimensions.

LLamaab02

84% match

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

84% match

Loading thumbnail…

SVG Foundamentals

This example demonstrates how SVG masks and primitive shapes combine to create a striking visual effect. It displays 100 horizontal rectangles filling the viewport, with a circular mask revealing only the area inside a 200-pixel-radius circle centered on the screen. Using D3.js version 7.6.1, the code binds data via `d3.range` and `selectAll` to generate the rectangles, then appends a `mask` element containing a black background rectangle and a white circle to control visibility. The rendering approach relies entirely on SVG elements and DOM manipulation through `d3.select`.

SSteven Hua

84% match

Loading thumbnail…

JS practice

This example demonstrates how SVG masks can combine two complementary cutout patterns. It renders a full-screen SVG canvas where a grid of vertical and horizontal rectangles is layered, with each set masked by a distinct circular hole centered in the viewport. The code uses the raw SVG DOM API via `document.createElementNS` to build masks, rectangles, and the masking circles, setting attributes like `mask` and `fill` directly. No JavaScript libraries are used; the result is a visible intersection of the two mask shapes across the rectangle layers.

CCameron Wehr

84% match