🌍 Public
Viewing a saved revision (read-only)
49c81c0af3e94af3af08420650cd39b8
SVG Fundamentals
This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.