Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Shapes SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

2015e816e7a0446ab93e66b4e2a7c26b

D3 Shapes SVG Fundamentals

0 stars1🌍 Public
Ssubratanp
Last edited Jan 21, 2023
Created on Jan 21, 2023

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

AI-generated description

This is SVG Test Linking Page.