Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Shapes SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

75a776bd7a1143f8bd455de1d594b9e6

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.