JS practice

100%

✓ Published1🌍 Public

Last edited Aug 30, 2023

Created on Aug 30, 2023

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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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…

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

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG masks and animation by creating a dynamic geometric composition. The code generates 50 horizontal black rectangles with a circular mask, layered over 50 vertical color-scaled rectangles with a second mask, producing an intersecting grid pattern. A JavaScript `animate` element continuously adjusts the height of the colored rectangles from half the screen height to full height over a 2-second cycle. The visualization uses raw SVG element creation via `document.createElementNS` and a hardcoded 10-color palette, with masks defined as circle and rect shapes.

JJignesh Mistry

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

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

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AAditya Joshi

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

81% match