{"version":"1.0","type":"rich","title":"Shapes with SVG","description":"This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and paths—using SVG markup within a React-like HTML structure. The shapes are defined directly in the SVG element, with some styled via CSS classes and inline attributes to show color, stroke, and scaling. The code uses the SVG `<g>` element to group shapes and apply transformations like `scale()` and `translate()`, along with CSS properties such as `stroke` and `stroke-width` for line styling. The visualization renders client-side entirely through SVG, with no external data sources or libraries beyond the standard SVG API.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5123c478970842f3870010640e592edd?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}