{"version":"1.0","type":"rich","title":"SVG fundamentals","description":"This example demonstrates how SVG elements can be styled and animated using CSS, with interactive hover effects that change shapes’ fill colors, stroke widths, and sizes. It shows a set of rectangles, circles, and a line rendered within an SVG viewport, where the CSS transitions and hover rules control the visual feedback. The code uses native SVG tags like `<rect>`, `<circle>`, and `<line>`, styled directly with CSS properties such as `fill`, `stroke`, and `transition`. No JavaScript libraries are employed; the behavior relies entirely on HTML, CSS, and the SVG DOM.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/392c27275b9a4118b2041961eea39d71?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}