SVG fundamentals
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.