Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of SVG Fundamentals Horizontal Vertical

Public visualization

Viewing a saved revision (read-only)

7b4fcd8c83c145b8bc2b6eb3f955a95c

Fork of Fork of SVG Fundamentals Horizontal Vertical

0 stars1🌍 Public
SSidney Oluoch
Last edited Aug 17, 2022
Created on Aug 17, 2022

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

AI-generated description

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

See also React Starter.