SVG Fundamentals
This example demonstrates the fundamentals of SVG masks and animation by creating a dynamic geometric composition. The code generates 50 horizontal black rectangles with a circular mask, layered over 50 vertical color-scaled rectangles with a second mask, producing an intersecting grid pattern. A JavaScript `animate` element continuously adjusts the height of the colored rectangles from half the screen height to full height over a 2-second cycle. The visualization uses raw SVG element creation via `document.createElementNS` and a hardcoded 10-color palette, with masks defined as circle and rect shapes.