Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG fundementals

Public visualization

Viewing a saved revision (read-only)

41e895273e5c492d8495950008c18e86

SVG fundementals

0 stars0🌍 Public
JJuraj Čižić
Last edited Sep 17, 2023
Created on Sep 17, 2023
Forked from HTML Starter

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.

AI-generated description

SVG learning.