MaskTest

100%

✓ Published1🌍 Public

Last edited May 7, 2022

Created on May 7, 2022

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

AI-generated description

d3 study

MIT Licensed

Similar vizzes

Loading thumbnail…

Full MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

Zzhansihua

91% match

Loading thumbnail…

Fork of MaskTest 1

This example creates a geometric grid pattern using D3 v6, rendering horizontal and vertical stripes across the full browser viewport. Two SVG masks reveal the stripes through circular windows in the center of the screen. The first mask shows vertical lines inside a white circle on a black background, while the second mask inverts this effect. The code uses D3’s `select`, `range`, and `join` methods to generate the rectangles, with SVG `mask` elements and `circle` shapes determining the visible regions.

Zzhansihua

88% match

Loading thumbnail…

Full MaskTest 2

Two sets of horizontal and vertical striped rectangles fill the screen, each masked by a different pattern of D3 symbols. The first mask uses white symbols on a black background, while the second inverts this, creating a crosshatched visual effect where the symbol shapes appear cut out of the stripes. Built with D3 v6, the code uses `range`, `symbols`, and `symbol` to generate the mask patterns, and `selectAll` with `join` to render the rectangles. The SVG output is sized to the full browser window.

Zzhansihua

87% match

Loading thumbnail…

d3

A grid of alternating horizontal and vertical SVG rectangles is masked to reveal a circular window at the center of the viewport. The example demonstrates how to construct and apply multiple SVG masks using D3’s selection and data-join methods, specifically `selectAll` with `range` and `join('rect')`. Two masks (`circle-mask` and `circle-mask-2`) use black-and-white rectangles and circles to control visibility of the 50 strips in each direction.

Sserebryanaya.n@gmail.com

85% match

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Ddeebanks77

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

84% match

Loading thumbnail…

SVG Foundamentals

This example demonstrates how SVG masks and primitive shapes combine to create a striking visual effect. It displays 100 horizontal rectangles filling the viewport, with a circular mask revealing only the area inside a 200-pixel-radius circle centered on the screen. Using D3.js version 7.6.1, the code binds data via `d3.range` and `selectAll` to generate the rectangles, then appends a `mask` element containing a black background rectangle and a white circle to control visibility. The rendering approach relies entirely on SVG elements and DOM manipulation through `d3.select`.

SSteven Hua

84% match

Loading thumbnail…

D3 Implementation

This example demonstrates how D3’s selection and data-join methods can create intersecting horizontal and vertical stripes across the full viewport. Two groups of rectangles, each bound to an array of 100 values via `d3.range`, are drawn with alternating orientations—one set spanning the width, the other the height. Using SVG `mask` elements, two circular masks are applied: one reveals the horizontal stripes inside a white circle on a black background, while the other does the reverse for vertical stripes. The result is a cross-hatched pattern visible only within the defined circular regions.

SSubhamChhetri

84% match