D3.js Practice Session 2 - Masks Circle and rectange
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.