Fork of SVG Fundamental

100%

Fork of SVG Fundamental

✓ Published0🌍 Public

Last edited Dec 31, 2025

Created on Dec 31, 2025

This example demonstrates how SVG masks can selectively reveal or hide parts of overlapping shapes. It creates two circular masks—one filled red for horizontal stripes and another inverted with a white background and black circle for vertical stripes. Using the D3.js `selection` module for logging, the code builds 40 horizontal and vertical rectangles via the DOM API, applying each mask URL to alternate stripe orientations. The result is a crosshatch pattern formed by masked rectangles over a full-screen SVG, showcasing mask composition and reuse.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates masking in SVG by creating a grid of horizontal and vertical rectangles, each with a mask applied. Two masks are rendered using D3's `symbol` API, placing geometric shapes like circles and crosses across the canvas. One mask is inverted by using black as the background and white for the shapes, while the other uses the opposite color scheme, causing the grid lines to appear only within the symbol outlines. The visualization shows how D3 selections, joins, and the `attr` method dynamically set mask references and symbol paths.

AAitorGD

89% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG masking by layering a grid of horizontal and vertical rectangles over a circular cutout. The rectangles are created dynamically using the DOM API `document.createElementNS` with the SVG namespace. Two complementary masks, `circle-mask` and `circle-mask-2`, alternate between white and black fills to control visibility, producing a striped pattern inside the circle while keeping the surrounding area solid. The code relies on raw SVG manipulation rather than a visualization library, with only the `d3-selection` API imported but not actively used.

AAitorGD

88% match

Loading thumbnail…

Fork of SVG Fundamentals

Horizontal and vertical stripes cross an SVG canvas to form a grid, while two mask layers reveal or hide rows and columns based on overlapping d3 symbols. The code uses d3.select, range, join, and symbol to generate 100 rectangles in each direction, with masks built via d3.mask and inverted fills. Both masks position five symbol paths (from d3.symbols) across the center, controlling visibility of the striped pattern. The rendering relies entirely on SVG elements and D3’s data-join to create the layered visual effect.

GGeorgi Dimitrov

87% match

Loading thumbnail…

Fork of SVG

This example demonstrates a geometric pattern of intersecting horizontal and vertical striped bars, with two circular masks creating a striking contrast. The visualization uses D3.js v7 to generate 100 rectangles for each axis and applies SVG mask elements with circular cutouts. The first mask reveals a white circle within black bars, while the second mask inverts the effect, creating a negative-space circle against the striped background.

Kkyoub1996@gmail.com

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

87% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch

87% match

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates how SVG masks can create two distinct circular cutout effects on a grid of overlapping rectangles. One mask, defined with a black background and white circle, reveals only the vertical stripes; the other, with a white background and black circle, controls visibility of horizontal stripes. The code builds the full-screen SVG and all elements programmatically using `document.createElementNS` and `setAttribute` in vanilla JavaScript, without any external libraries. The result is a visual interplay of lines that form a transparent circular window at the center of the viewport.

JJetlinZ

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a striped mask effect by layering two sets of rectangles with intersecting patterns. The SVG output shows vertical black bars overlaid with horizontal black bars, where both layers use SVG masks to reveal or hide portions of the rectangles. The code uses D3 v7’s `select`, `range`, and `data` joins to generate 100 rectangles per axis across the full viewport. The first mask exposes a rectangular region while the second mask inverts it, creating a dynamic checkerboard-like visual from the overlapping shapes.

HHaritscode

86% match