{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d4551b574faf47698ec2244793f6e055?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}