{"version":"1.0","type":"rich","title":"SVG and D3 bundling with Webpack","description":"This example demonstrates how SVG masks can layer and intersect geometric patterns, creating a tartan-like grid of vertical and horizontal bars. The code uses D3 v3’s `select`, `range`, `symbol`, and `symbols` APIs to generate shapes, while webpack bundles the JavaScript and SVG into a single `dist/bundle.js` file. It renders 100 vertical and 100 horizontal rectangles, each filtered through two complementary masks defined with `mask` elements and `rect`/`path` primitives. The visualization highlights modular SVG composition and mask inversion for visual effects.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0404f92daa3a40edb5a15cd1e3366176?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}