Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG and D3 bundling with Webpack

Public visualization

Viewing a saved revision (read-only)

6e38e22423a345108d0ce0ed03b6b2f4

SVG and D3 bundling with Webpack

0 stars0🌍 Public
GGiacomo Rossoni
Last edited Mar 29, 2024
Created on Mar 29, 2024
Forked from SVG and Javascript

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 description

3PP installation

npm install

Build for development

npm run build

Build automatically when saving

npm run watch