{"version":"1.0","type":"rich","title":"SVG Fundamentals","description":"This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5d52187173bc475e8e42f60aefe2cf2f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}