Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

04a5fd02f57248e3bb3b2387ef5823e2

SVG Fundamentals

0 stars1🌍 Public
GGeorgi Dimitrov
Last edited Jun 29, 2022
Created on Jun 8, 2022
Forked from HTML Starter

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

AI-generated description