mask experiments

100%

mask experiments

✓ Published0🌍 Public

Last edited Nov 19, 2022

Created on Oct 7, 2022

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`.

AI-generated description

Do some stuff with masks as shown in Currans stream (ca. 3:00h)

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

MaskTest

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

Zzhansihua

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

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

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

83% match

Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

DDuckGorilla

82% match

Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Ssubratanp

82% match

Loading thumbnail…

Full MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

Zzhansihua

82% match