{"version":"1.0","type":"rich","title":"Shapes and Colors with SVG and CSS","description":"This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS, using inline SVG elements in an HTML page. It shows how default black fills contrast with explicit red and green fills, while a group with `fill=\"#adf6ff\"` and `stroke=\"black\"` applies shared styling to multiple shapes. The `.lines` class in styles.css sets stroke color and width, with path-specific overrides for rounded joins and caps. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, and CSS rules handle body margins and overflow without external libraries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/eda5001afcc84441b05999437575c72c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}