Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of MaskTest 1

Public visualization

Viewing a saved revision (read-only)

d2247f763e9c445c9a8032727d1fa653

Fork of MaskTest 1

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

This example creates a geometric grid pattern using D3 v6, rendering horizontal and vertical stripes across the full browser viewport. Two SVG masks reveal the stripes through circular windows in the center of the screen. The first mask shows vertical lines inside a white circle on a black background, while the second mask inverts this effect. The code uses D3’s `select`, `range`, and `join` methods to generate the rectangles, with SVG `mask` elements and `circle` shapes determining the visible regions.

AI-generated description

d3 study