Fork of SVG Fundamentals

100%

Fork of SVG Fundamentals

✓ Published1🌍 Public

Last edited Jun 29, 2022

Created on Jun 29, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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ć

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

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

SSubhendu Karmakar

88% match

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

88% match

Loading thumbnail…

Function Fork of SVG Fundamentals - D3 (group)

This example demonstrates how SVG masks can create intricate grid patterns from overlapping horizontal and vertical rectangles. Using D3.js version 7, the code generates 100 rect elements in each direction, applying two distinct masks that feature D3's built-in symbol shapes. The `renderMask` function constructs each mask with a path for every symbol from the `d3.symbols` array, positioned horizontally across the canvas. A boolean parameter controls whether the mask is inverted, switching between black and white fills to produce contrasting effects on the final visualization.

SSidney Oluoch

87% match

Loading thumbnail…

Fork of SVG Fundamental

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.

Aankacha

87% match

Loading thumbnail…

Full Fork of SVG Fundamentals - D3 (group)

This example demonstrates a full-screen, web-based visualization that combines two sets of parallel stripes—one horizontal and one vertical—overlaid on a blank canvas. The stripes are constructed using D3’s `select`, `range`, and `join` methods to generate SVG rectangles. Two SVG masks (`circle-mask` and `circle-mask-2`) shape the stripes: the horizontal set becomes visible through a diamond symbol (`d3.symbol`), while the vertical set is masked by a circle, with the mask colors inverted to create a contrasting cutout effect.

SSidney Oluoch

87% match