{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styled with CSS. It shows shape grouping via nested `<g>` elements, transforms for scaling and translation, and both inline SVG attributes and CSS classes for controlling fill, stroke, and stroke-width. The code uses plain React rendering with SVG’s native elements, including a `<path>` with a `d` attribute for a custom line. A `styles.css` file applies stroke styling to grouped elements and defines a `.highlighted` class.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1aeca4bccd1448d08bea2c448f6fca19?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}