{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates how to construct basic SVG shapes—circles, rectangles, lines, and paths—using a static HTML page and CSS. The visualization shows how SVG attributes like `fill`, `stroke`, `stroke-width`, and the `<g>` element group shapes to apply shared styling, with initial shapes appearing in default black and then colored red and green. A `<g>` group applies a light blue fill and black stroke to its contents, and another group applies a thick black stroke to a line and path. The code uses raw SVG in `index.html` with a linked `styles.css` for page-level body styling, with no JavaScript involved.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6b3d91a6f3d44ce99349373a08c55ca5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}