Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

inverse masking done

Public visualization

inverse masking done

0 stars1🌍 Public
AAkshay
Last edited Nov 17, 2022
Created on Nov 17, 2022
Forked from circle mask

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.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed