{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates SVG shapes styled with CSS, illustrating how grouping and transform attributes organize and position circles, rectangles, and paths. The visualization uses inline SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes like `fill`, `stroke`, and `stroke-width` controlling appearance. CSS classes in the stylesheet define properties for the line graph, including color and stroke-linejoin. The rendering is purely client-side SVG, with no external JavaScript libraries. The layout applies a scale transform to the entire graphic and a translate transform to center the line elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/4868660ff8834397814cf5e0a0908004?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}