{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates how to combine SVG elements with CSS styling to create and transform basic geometric shapes. The visualization shows circles, rectangles, lines, and paths arranged in a grid-like layout, with some shapes inheriting default black fills while others are explicitly colored red and green. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>` inside a `<g>` element with scale and translate transforms. CSS classes and rules in `styles.css` control stroke properties, including a custom `stroke-linejoin` for paths, while the body’s margin and overflow are reset for full-viewport display.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/696c94def0d54d4aa97cc7a6d3533938?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}