{"version":"1.0","type":"rich","title":"SVG Fundamentals","description":"This example demonstrates basic SVG shape rendering and styling through direct manipulation of SVG elements. A large green rectangle with a black border and a red circle are drawn, while white grid lines divide the canvas vertically. The code uses raw SVG markup with CSS styling, including a `rect:hover` rule that transitions the rectangle’s fill color to blue and thickens its stroke over 1 second. The example highlights fundamental SVG attributes like `x`, `y`, `cx`, `cy`, `width`, and `height` for positioning and sizing shapes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f8a98eb1084d474694de0ee36f19d066?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}