Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

SVG Fundamentals

0 stars0🌍 Public
MMichael Bell
Last edited Nov 29, 2023
Created on Nov 29, 2023
Forked from HTML Starter

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

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