Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

create mask

Public visualization

Viewing a saved revision (read-only)

29b850eee3104e52a62251d4dc1cc9ee

create mask

0 stars1🌍 Public
AAkshay
Last edited Nov 17, 2022
Created on Nov 17, 2022
Forked from horizontal lines

This example uses an SVG mask to create a circular window over a series of alternating horizontal rectangles. The mask, defined with an SVG `<mask>` element containing a white circle, is applied to each of the 100 rectangles via the `mask` attribute. The visualization demonstrates how SVG masks work in a bare-bones HTML page using vanilla JavaScript, dynamically creating the SVG elements and filling the viewport.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.