{"version":"1.0","type":"rich","title":"SVG Fundamentals","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0378ce4df0b04b6ba1dd158f48407926?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}