{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This gallery example demonstrates how raw SVG elements such as circles, rectangles, lines, and groups are composed into a static geometric composition. The visualization uses React as the framework and renders graphics through SVG markup, with styling applied via an external CSS file. Basic SVG attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke-width` define each shape's position and appearance, while the `transform` attribute translates a grouped set of shapes. The example highlights different fill colors, named colors, and hex codes, as well as stroke styling, to showcase foundational vector-graphics techniques.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/10bced8a49b749719e174678f9a38d9c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}