another Shapes SVG Fundamentals

100%

another Shapes SVG Fundamentals

✓ Published1🌍 Public

Last edited Jan 21, 2023

Created on Jan 19, 2023

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.

AI-generated description

This is SVG Test Linking Page.

MIT Licensed

Similar vizzes

Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Ssubratanp

89% match

Loading thumbnail…

D3 Shapes SVG Fundamentals

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.

Ssubratanp

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

87% match

Loading thumbnail…

SVG Fundamentals

SSubhendu Karmakar

87% 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

86% match

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

85% 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

84% 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

84% match