Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Masks

Public visualization

SVG Masks

0 stars0🌍 Public
Jjhrdt
Last edited Jun 16, 2021
Created on Jun 16, 2021
Forked from HTML Starter

This example shows how SVG masks can punch a heart-shaped hole through a solid red circle, leaving the surrounding area visible. A `<mask>` element defines the cutout using a black rectangle for invisible regions and a white path for the visible heart shape. The mask is applied to a `<circle>` via the `mask` attribute, with the heart path drawn using an SVG arc and quadratic Bézier commands. The page is plain HTML with inline CSS and JavaScript, requiring no external libraries.

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