🌍 Public
Viewing a saved revision (read-only)
432722e7429b4156976ed59d5c7e33b6
SVG Animations using CSS transitions
A single red rectangle with a black border sits centered in an SVG canvas. The example demonstrates CSS transitions applied directly to SVG elements, specifically the `rect` element. When hovered, the shape smoothly animates its `fill` from red to green and its `stroke-width` from 20 to 100 pixels over a 3000ms duration. The code uses plain CSS within a `<style>` block, targeting the SVG element’s `transition` property, with no JavaScript or external libraries involved. The rendering is pure SVG markup contained in an HTML file.
AI-generated descriptionA demonstration of SVG shapes.