🌍 Public
Viewing a saved revision (read-only)
48b1e5a8f82f4e8d9e16e668e40dc1f0
SVG Fundamentals
SSubhendu Karmakar
Last edited Jan 11, 2024
Created on Jan 11, 2024
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.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.