100%

SVG and D3 bundling with Webpack

✓ Published0🌍 Public

Last edited Mar 29, 2024

Created on Mar 29, 2024

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

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates how D3.js SVG masks can combine overlapping rectangular grids with symbolic cutouts to create intricate geometric patterns. The visualization renders 100 horizontal and vertical bars whose intersection is selectively revealed through two complementary masks. The first mask shows white space around circle, triangle, and cross symbols, while the second inverts this effect. Using D3’s `select`, `range`, `symbol`, and `symbols` APIs, the code generates SVG paths and applies mask attributes dynamically. The result is a layered interplay of shapes, highlighting SVG’s masking capabilities for pattern composition.

HHenrique Peixoto

85% match

Loading thumbnail…

More complex SVG + D3

This example demonstrates SVG masking with D3, where 100 horizontal and 100 vertical rectangles render as a grid and are selectively revealed through two masks. The masks contain symbol paths from `d3.symbol` and `d3.symbols`, with one mask inverted to create contrasting visibility. Using `d3.select`, `d3.range`, and `selection.join`, the code appends rectangles and paths directly to the SVG, positioning symbols at evenly spaced intervals. The `renderMask` function accepts an inverted flag to alternate fill colors between black and white, showcasing how D3 v7 enables dynamic mask construction.

MMarta

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar

83% match

Loading thumbnail…

SVG Fundamentals

SSubhendu Karmakar

83% match

Loading thumbnail…

SVG Fundamentals

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

GGeorgi Dimitrov

82% match

Loading thumbnail…

SVG fundementals

This example demonstrates two sets of overlapping horizontal and vertical stripes, each masked by a set of symbols. It uses D3.js version 6.6.1 with the `select`, `range`, `symbols`, and `symbol` APIs to construct SVG masks. The horizontal stripes use the first mask, while the vertical stripes use an inverted second mask, revealing the symbols where the stripes intersect. The rendering is entirely SVG-based, with the code appending mask elements and rectangles to the SVG canvas.

JJuraj Čižić

82% match

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by rendering a grid of horizontal and vertical bars across the full viewport, with circular masks that reveal or hide portions of the pattern. The visualization uses D3’s `select` and `range` functions to generate 100 rectangles in each direction, applying masks defined via SVG `<mask>` elements with white and black circles. The code constructs the SVG scene programmatically, showing how React-based projects can manipulate vector graphics through D3’s data-join syntax and attribute setters.

EEzhil-Kalai

82% match