Skip to main content
SimilarExport ZIP
100%

D3 Shapes SVG Fundamentals

✓ Published1🌍 Public
Ssubratanp
Last edited Jan 21, 2023
Created on Jan 21, 2023

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

AI-generated description

This is SVG Test Linking Page.

MIT Licensed

Similar vizzes

Loading thumbnail…

New D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks combine with geometric primitives to create layered visual effects. Horizontal and vertical rectangles are drawn across the full viewport, then clipped through two masks—one using standard black-on-white fill logic and another inverted. Each mask contains a group of D3 v3 symbol paths rendered from the `symbols` API, with their positions and sizes defined by `range` and transform translations. The result shows how `selectAll`, `join`, and mask attributes control visibility across overlapping elements.

Ssubratanp
90% 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
88% 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
88% match
Loading thumbnail…

another Shapes SVG Fundamentals

This example uses SVG masks to create a circular reveal over a grid of horizontal and vertical filled rectangles. The visualization demonstrates how two complementary masks—one with a white circle on a black background and the other with a black circle on a white background—selectively show or hide the underlying stripes. Built with the D3.js library (v6), the code generates 100 horizontal bars and 100 vertical bars, then applies these masks to create an intersecting pattern of lines visible only within the defined circular regions. The data is procedurally generated in JavaScript using `range()` and a `for` loop, with rendering handled entirely through SVG elements.

Ssubratanp
88% match
Loading thumbnail…

D3, Mask code with star shape

This example shows a grid of horizontal and vertical stripes overlaid on a full-screen SVG, with two complementary star-shaped masks cutting through the pattern. The first mask reveals the horizontal stripes through a white star on black, while the second mask applies the inverse effect to the vertical stripes. The visualization uses D3 v7’s `range`, `selectAll`, and `symbol` API to generate 100 rect elements per orientation and construct the star paths via `symbol(symbols[4], 100000)`. Masks are defined with custom `mask` elements and applied via the `mask` attribute, producing a layered, intersecting star composition.

JJetlinZ
88% match
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
87% match
Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

JJetlinZ
86% match
Loading thumbnail…

d3 simbols

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

Sserebryanaya.n@gmail.com
86% match