Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

MaskTest

Public visualization

Viewing a saved revision (read-only)

ce774c30ccde4297a98c360cbadcc75c

MaskTest

0 stars1🌍 Public
Zzhansihua
Last edited May 7, 2022
Created on May 7, 2022
Forked from HTML Starter

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

AI-generated description

d3 study