{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example shows how to draw basic SVG shapes—circles, rectangles, lines, and paths—within a React application using plain SVG elements and CSS styling. The SVG renders at a fixed width and height, with groups applying transforms to scale, translate, and position shapes. CSS classes, such as `.lines`, control stroke color and width, while inline attributes define fills like `red` and `#83CC2A`. The code uses React and includes a minimal JavaScript file that sets a text message, demonstrating SVG and CSS integration without a charting library.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1ebc8911047a4e37a3cc688012ac1aae?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}