Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

svg fund

Public visualization

Viewing a saved revision (read-only)

254656eef8cb440ead5d5c4001cf31f6

svg fund

0 stars0🌍 Public
LLamaab02
Last edited Aug 18, 2022
Created on Aug 7, 2022
Forked from HTML Starter

A grid of 100 thin horizontal rectangles spans the full width of the viewport, but a circular mask reveals only the central portion of this striped pattern. The visualization demonstrates how SVG masks work by layering a white circle on a black background to selectively hide or show the underlying marks. Built with D3’s `select`, `range`, and `join` methods, the code appends rectangles with a shared `mask` attribute, then constructs the mask using SVG `mask` and `circle` elements. The data is a simple sequential range, and the circle is centered at half the window’s dimensions.

AI-generated description