Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG and Javascript

Public visualization

SVG and Javascript

0 stars1🌍 Public
GGiacomo Rossoni
Last edited Mar 28, 2024
Created on Mar 28, 2024

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.

AI-generated description

SVG and Javascript

Comments

Sign in to join the discussion.

MIT Licensed