Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js fundamental

Public visualization

D3.js fundamental

0 stars1🌍 Public
Ddeebanks77
Last edited Nov 23, 2022
Created on Nov 23, 2022

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

AI-generated description

Sunrise/sunset.

Comments

Sign in to join the discussion.

MIT Licensed