Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js Practice Session 2 - Masks Circle and rectange

Public visualization

D3.js Practice Session 2 - Masks Circle and rectange

0 stars0🌍 Public
KKoneti Hemanth Raju
Last edited Aug 25, 2024
Created on Aug 25, 2024

This example demonstrates the use of an SVG mask to selectively reveal horizontal stripes while concealing vertical ones. The visualization renders 100 horizontal and 100 vertical rectangle elements, each with distinct dimensions, onto an 800x600 canvas. The mask, defined with the ID `circle-mask`, consists of a full-size black rectangle and a central white circle with a radius of 200. Only the horizontal rectangles apply the mask, resulting in a visible circular pattern where they intersect, while the vertical rectangles remain unaffected. The code leverages raw SVG manipulation through `createElementNS` and attribute setters, without high-level D3.js abstractions, relying instead on direct DOM construction.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed