SVG Fundamentals

100%

SVG Fundamentals

✓ Published1🌍 Public

Last edited Jun 29, 2022

Created on Jun 8, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

SVG Fundamentals

SSubhendu Karmakar

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

89% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by drawing two sets of perpendicular parallel lines—horizontal bars from top to bottom and vertical bars from left to right—that intersect to form a grid. Two circular masks are applied to reveal or hide overlapping regions, creating a crossfade effect between the two line groups. The visualization uses D3’s `select`, `range`, and data join methods to generate the SVG elements, and defines two `<mask>` elements with black and white rectangles and circles to control visibility. The rendering relies entirely on SVG attributes like `width`, `height`, and `mask`, with no animation or interaction.

Ssugeelan@hotmail.com

89% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AAditya Joshi

89% match

Loading thumbnail…

SVG Fundamentals

This example reproduces a Sol LeWitt-inspired geometric composition using layered SVG elements and D3.js. It draws a grid of horizontal and vertical rectangles across the full viewport, with each line partially masked to create intricate overlapping patterns. The visualization uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate two masks containing circular, triangular, and other symbol shapes. These masks apply inverse fill logic—one inverting the grid’s visibility—producing a dynamic interplay between the background lines and foreground symbolic cutouts. The rendering relies entirely on SVG attributes like `mask` and `fill`.

Ssh_ip

88% match

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ć

87% match