{"version":"1.0","type":"rich","title":"shapes with SVG and CSS","description":"This example visually demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes such as circles, rectangles, lines, and paths. The markup uses plain SVG elements within a single `svg` container, with styling applied through both inline attributes like `fill` and `stroke-width` and a CSS class (`.lines`) that sets stroke properties. The code relies on native SVG APIs and CSS, with a minimal JavaScript file that writes \"Hello world\" into the page. The rendering approach is direct SVG, showing how grouped elements (`<g>`) can inherit and override visual properties.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6658d527fa3b46ee8b7506a0bdd1e182?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}