{"version":"1.0","type":"rich","title":"Shapes and Colors with SVG and CSS","description":"This example demonstrates how SVG shapes and CSS styling can be combined to create a structured visual composition. It shows circles, rectangles, lines, and a path arranged on a 960-by-500 canvas, with some shapes inheriting presentation attributes from a `<g>` group while others use explicit `fill` properties. The code uses native SVG elements (`circle`, `rect`, `line`, `path`) and CSS classes from `styles.css` to define stroke colors, widths, and line joins. The rendering approach relies on static SVG markup without JavaScript or external visualization libraries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/348583c751db4e74953a33b9b8322b62?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}