Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

JS practice

Public visualization

JS practice

0 stars1🌍 Public
CCameron Wehr
Last edited Aug 30, 2023
Created on Aug 30, 2023
Forked from SVG Fundamentals

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.

Comments

Sign in to join the discussion.

MIT Licensed