🌍 Public
Viewing a saved revision (read-only)
43f4dd66e12841ffbf53d8022edf5268
SVG and D3 bundling with Webpack
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.
AI-generated descriptionSVG and Javascript