Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Animations using CSS transitions

Public visualization

SVG Animations using CSS transitions

0 stars0🌍 Public
GGyeongmin Kim
Last edited Jun 10, 2023
Created on Jun 10, 2023
Forked from HTML Starter

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 description

A demonstration of SVG shapes.

Comments

Sign in to join the discussion.

MIT Licensed