Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

another Shapes SVG Fundamentals

Public visualization

another Shapes SVG Fundamentals

0 stars1🌍 Public
Ssubratanp
Last edited Jan 21, 2023
Created on Jan 19, 2023

This example uses SVG masks to create a circular reveal over a grid of horizontal and vertical filled rectangles. The visualization demonstrates how two complementary masks—one with a white circle on a black background and the other with a black circle on a white background—selectively show or hide the underlying stripes. Built with the D3.js library (v6), the code generates 100 horizontal bars and 100 vertical bars, then applies these masks to create an intersecting pattern of lines visible only within the defined circular regions. The data is procedurally generated in JavaScript using `range()` and a `for` loop, with rendering handled entirely through SVG elements.

AI-generated description

This is SVG Test Linking Page.

Comments

Sign in to join the discussion.

MIT Licensed