{"version":"1.0","type":"rich","title":"Shapes and Colors with SVG and CSS","description":"This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—using both inline presentation attributes and CSS classes to control fill and stroke styles. It shows how group elements (`<g>`) apply shared transformations and styles, such as a `translate` offset and a unified fill color, while individual elements override these with explicit `fill`, `stroke`, and `stroke-width` values. The CSS rules target the `.lines` group to set black strokes for lines and a teal color with rounded joins and caps for the path. The code uses plain SVG markup within an HTML document, with the stylesheet defining properties like `overflow: hidden` on the body.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/541476dd35ce4fb583155b75eb7c26f9?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}