{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in a 960×500 viewport with a global scale transform. It shows how inline SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes (`.lines`) style the line and path elements with custom stroke colors and line joins. The code uses raw SVG markup within an HTML document, applying a `transform=\"scale(1.5)\"` to enlarge all shapes and a `translate` to offset a group of pink shapes. No external JavaScript libraries are employed; styling relies entirely on a linked stylesheet.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/02b4e10a4d1e4a09be350b16bd2fbba4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}