Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3

Public visualization

Viewing a saved revision (read-only)

45f84894e13c4e0595619ea4cc488a8a

D3

0 stars0🌍 Public
MMuhammad Dawood Rafique
Last edited Jan 11, 2024
Created on Jan 11, 2024
Forked from HTML Starter

This example demonstrates layered masking in SVG to create a grid of horizontal and vertical lines that intersect around a central circular opening. It uses D3’s `select` API alongside raw DOM manipulation to append two complementary masks, each defining a circular region of white or black fill. The code renders 100 horizontal and 100 vertical rectangles, applying one mask to each set so that lines are hidden or revealed in alternating patterns around the circle. The result is a moiré-like visual effect built purely from basic SVG shapes and mask definitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.