🌍 Public
Viewing a saved revision (read-only)
7b4fcd8c83c145b8bc2b6eb3f955a95c
Fork of Fork of SVG Fundamentals Horizontal Vertical
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 descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.