{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged on a red background. It shows how SVG elements can be styled with inline attributes, grouped using the `<g>` element, and transformed with the `translate` attribute. The code uses plain React to render the SVG markup and relies on CSS for the page’s background color. It also illustrates applying stroke properties like `stroke-width` to grouped lines and paths, showcasing fundamental vector graphics composition without external libraries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b92824fce146446cb117236e97a9519b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}