{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates how SVG shapes such as circles, rectangles, lines, and paths can be styled and transformed using SVG attributes and CSS. It shows the interaction between inline presentation attributes like `fill` and `stroke`, CSS classes, and nested `<g>` elements for grouping. The code uses the React framework to render a static SVG with a scale transform and a translate transform. CSS rules in the stylesheet apply stroke and fill styles to line and path elements, illustrating the layering of SVG styling methods.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f707570183b4459a892ac549984001a7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}