{"version":"1.0","type":"rich","title":"SVG Fundamentals","description":"This example demonstrates the basic building blocks of SVG graphics, including circles, rectangles, a custom path, and a line, all rendered directly on an HTML page. It shows how CSS can animate rectangular elements smoothly over three seconds, and how a hover effect triggers a green fill with a thick stroke. The code uses the native `svg` element and its child tags like `circle`, `rect`, `path`, and `line`, with styling applied via an embedded `<style>` block. It serves as a bare-minimum introduction to SVG fundamentals using only HTML and JavaScript without any external libraries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/cdd3b477e45441888435dbc9e83109b6?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}