Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Learn D3

Public visualization

Viewing a saved revision (read-only)

19c2a81ea68b4ea495bce2079efe911e

Learn D3

0 stars1🌍 Public
MMark Christian
Last edited Jun 6, 2022
Created on Jun 6, 2022
Forked from HTML Starter

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

AI-generated description

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

See also React Starter.