{"version":"1.0","type":"rich","title":"SHAPES+SVG+CSS","description":"This example draws primitive SVG shapes—circles, rectangles, lines, and a path—directly in a React component’s markup. It uses SVG attributes like `cx`, `r`, `fill`, `stroke`, and `stroke-width`, plus CSS classes to style strokes and hide page overflow. The `<g>` elements apply transforms for scaling and translation, grouping shapes with shared fill colors. The visualization demonstrates how static SVG geometry and CSS rules combine without additional libraries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7e254ebba4ec4deebedb91f450c9baa7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}