{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"This example demonstrates how to construct simple geometric shapes—circles, rectangles, lines, and paths—using inline SVG elements within an HTML page. The visualization shows how SVG properties like `fill`, `stroke`, and `stroke-width` can be applied directly or through CSS classes, with the first row using default black fills and the second applying explicit red and green colors. A group with `translate` and `stroke` attributes renders white shapes with black outlines, while a separate `.lines` class sets a thick black stroke on line and path elements, with the path receiving a distinct teal color and rounded joins via CSS. The scene is scaled up by a factor of 1.5 using an SVG transform.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5527bfa04dbd402baa7f31909dfe5bb4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}