🌍 Public
Viewing a saved revision (read-only)
428bdfd49ed7473ca8c68c77dddbe951
D3 mask all shapes
This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.