Fork of patterns masked

100%

Fork of patterns masked

✓ Published0🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

This example uses SVG masks to create a geometric pattern of horizontal and vertical stripes that disappear within a circular region. Two complementary masks (`circle-mask` and `circle-mask2`) control which stripes are visible, with the horizontal lines masked by a black circle and the vertical lines masked by its inverse. All elements are created dynamically using the native `document.createElementNS` API, rendering 100 rectangles in each direction without any external libraries.

AI-generated description

MIT Licensed

Similar vizzes

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

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

85% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch

85% match

Loading thumbnail…

Fork of SVG Fundamentals Horizontal

This example demonstrates SVG masking by confining a pattern of horizontal and vertical lines to a circular region at the center of the screen. The code generates 100 horizontal strips and 100 vertical strips using the `document.createElementNS` API, while a mask containing a white circle over a black rectangle restricts visibility of the horizontal lines. The result is a grid where only the intersection inside the circle remains visible, created entirely with vanilla JavaScript and no external libraries.

SSidney Oluoch

85% match

Loading thumbnail…

patterns masked

A grid of horizontal and vertical stripes is partially revealed through a circular mask, creating a layered pattern where the lines cross and overlap within the masked region. The visualization uses raw SVG APIs, including `document.createElementNS` to construct rectangles and a mask with a circle, alongside `setAttribute` to position elements. The stripes form a woven texture, and the mask highlights a central focal area while leaving the surrounding space empty.

Gguts

85% match

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates how SVG masks can create two distinct circular cutout effects on a grid of overlapping rectangles. One mask, defined with a black background and white circle, reveals only the vertical stripes; the other, with a white background and black circle, controls visibility of horizontal stripes. The code builds the full-screen SVG and all elements programmatically using `document.createElementNS` and `setAttribute` in vanilla JavaScript, without any external libraries. The result is a visual interplay of lines that form a transparent circular window at the center of the viewport.

JJetlinZ

84% match

Loading thumbnail…

Fork of SAP_SVG_JS_FUNDAMENTALS

This example demonstrates a geometric pattern created entirely with SVG masks, rendering a circular window surrounded by a grid of horizontal and vertical stripes. The visualization uses two custom mask definitions—one with a white circle on a black background and another with a black circle on white—to selectively reveal and hide alternating sets of rectangles drawn across the full viewport. Built with vanilla JavaScript and the SVG DOM API, it dynamically sizes the canvas to the browser window and constructs 100 lines in each direction using `createElementNS` and `setAttribute`, producing a layered, intersecting lattice effect without external libraries.

Ssapan3004

83% match

Loading thumbnail…

Fork of MaskTest 1

This example creates a geometric grid pattern using D3 v6, rendering horizontal and vertical stripes across the full browser viewport. Two SVG masks reveal the stripes through circular windows in the center of the screen. The first mask shows vertical lines inside a white circle on a black background, while the second mask inverts this effect. The code uses D3’s `select`, `range`, and `join` methods to generate the rectangles, with SVG `mask` elements and `circle` shapes determining the visible regions.

Zzhansihua

83% match