Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Animation using CSS Transition

Public visualization

Viewing a saved revision (read-only)

cd0658a327674332b9bcf05dfd752e1e

SVG Animation using CSS Transition

0 stars0🌍 Public
Ddaigou65
Last edited Nov 23, 2023
Created on Nov 23, 2023

A single red rectangle with a black border animates smoothly when hovered, transitioning its fill color to green and expanding its stroke width over three seconds. This simple example demonstrates SVG animation achieved through CSS transitions, applied directly to the `rect` element using the `transition: all 3000ms` property. The page is a bare HTML document with embedded CSS and JavaScript, showcasing how CSS can drive SVG property changes without explicit JavaScript animation logic. The HTML includes a minimal SVG canvas of 960 by 500 pixels, with the rectangle's styling and hover state defined entirely in the stylesheet.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.