Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Full MaskTest 1

Public visualization

Viewing a saved revision (read-only)

075279e596a941109959969cc1aa9b35

Full MaskTest 1

0 stars1🌍 Public
Zzhansihua
Last edited May 8, 2022
Created on May 8, 2022
Forked from Fork of MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

AI-generated description

d3 study