{"version":"1.0","type":"rich","title":"Shapes and Colors with SVG and CSS","description":"This example demonstrates foundational SVG shapes and styling through direct markup and CSS. Circles, rectangles, lines, and a path are arranged with basic attributes like `cx`, `cy`, `r`, `x`, and `y`, while CSS classes control stroke color, width, and line join styles. A `<g>` element groups shapes to apply shared fill and stroke properties, and another group uses the `transform` attribute to translate and scale the entire composition. The rendering is purely client-side SVG, with styling split between inline presentation attributes and an external `styles.css` stylesheet.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c1dfb517670f4f03af13c54599733da5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}