{"version":"1.0","type":"rich","title":"Shapes and Colors with SVG and CSS","description":"This example demonstrates how SVG shapes and CSS influence visual styling, showing circles, rectangles, lines, and paths arranged in groups with varied fills, strokes, and transforms. The React-based code renders a single SVG canvas at 960 by 500 pixels, using inline attributes like `fill` and `stroke` alongside a CSS stylesheet to define colors, line widths, and join styles. It highlights how SVG presentation attributes and CSS rules layer together, with groups applying shared styling and coordinate translations to position elements across the scene.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1c8851127e494445ad08091c2ab41418?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}