🌍 Public
Viewing a saved revision (read-only)
ed3e228aba654c0db57cf9adb57c54ba
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.