{"version":"1.0","type":"rich","title":"Shapes with SVG and HTML","description":"This example showcases a collection of SVG shapes—circles, rectangles, lines, and paths—rendered directly within an HTML page using React. It demonstrates how SVG attributes like `fill`, `stroke`, and `stroke-width` control the appearance of each shape, alongside CSS classes (e.g., `.lines`) that apply styling to entire groups. The code employs SVG `<g>` elements with `transform` attributes to translate and scale the drawing, and includes a `<path>` with a minimal `d` attribute. The visualization is a static, pure SVG illustration with no external data source, focusing on fundamental vector graphics composition.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/396bbcd074bc40f79607a31e50ed0118?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}