SVG Animation using CSS Transition

100%

SVG Animation using CSS Transition

✓ Published0🌍 Public

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.

Similar vizzes

Loading thumbnail…

SVG Animations using CSS transitions

A single red rectangle with a thick black stroke sits on a blank SVG canvas. The example demonstrates CSS transitions on SVG elements, where hovering over the rectangle smoothly animates its fill color to green and expands its stroke width over three seconds. This is achieved using the CSS `transition` property on the rect’s `fill` and `stroke-width` attributes, applied directly within an HTML page. No JavaScript libraries are used; the interaction relies purely on CSS hover states and SVG styling.

GGiorgi Xiaoyu Zhang

96% match

Loading thumbnail…

SVG Animations Using CSS transitions

A single red rectangle with a thick black stroke animates smoothly when hovered. The example uses CSS transitions on the `rect` element, defining a 1000ms transition for all properties. On hover, the fill changes to lightblue and the stroke width increases from 20px to 50px. This demonstrates how SVG elements can leverage standard CSS for declarative animation, with the rectangle placed at (250, 100) within a 960 by 500 viewport.

RRyanYun0017

95% match

Loading thumbnail…

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.

GGyeongmin Kim

94% match

Loading thumbnail…

SVG animation using CSS transitions

An SVG rectangle animated entirely through CSS transitions changes its fill color from red to green and its stroke width from 20 to 100 pixels when hovered. The example uses a plain HTML page with embedded CSS rules targeting the `rect` element, leveraging the CSS `transition` property for smooth interpolation over 3 seconds. No JavaScript libraries are involved; the styling is applied directly to the hard-coded SVG markup. The rectangle retains its black stroke, demonstrating how CSS can style and animate inline SVG elements without external frameworks.

NNikki Masroor

94% match

Loading thumbnail…

SVG Animations using CSS transitions

A static red rectangle on an SVG canvas transitions its fill color and stroke width when hovered, using CSS transitions. The code defines a rect element with an initial red fill and black stroke, and a CSS rule targeting rect:hover to turn it green and expand the stroke. The transition property, set to all 1500ms, animates these changes smoothly over 1.5 seconds using vanilla HTML, CSS, and JavaScript.

ZZololen

94% match

Loading thumbnail…

SVG Animations using CSS transitions

A single red rectangle inside an SVG canvas transitions to green and thickens its black stroke over three seconds when hovered. The example uses CSS transitions applied directly to SVG elements via a `rect:hover` selector, with the `transition: all 3000ms` property animating both `fill` and `stroke-width`. The rendering relies purely on inline SVG in an HTML document, demonstrating how CSS handles SVG presentation attributes without JavaScript or D3. The effect is triggered by the hover state, showing a straightforward CSS-driven animation.

NNita

93% match

Loading thumbnail…

SVG ANIMATIONS

A single red square with a black outline sits centered on a 960 by 500 SVG canvas. CSS transitions animate both the fill color and stroke width over three seconds when the rectangle is hovered, turning it green and expanding its border. The example uses SVG markup with embedded CSS styling and the `:hover` pseudo-class, with no external JavaScript libraries.

Rroyal8466

91% match

Loading thumbnail…

SVG Transition rectangle

This example shows how CSS transitions can animate SVG shapes when a user hovers over them. A red rectangle changes its fill color to blue, increases its stroke width, and shifts its stroke color to grey over 3 seconds, while a circle fades to light green and scales up over 2 seconds. A second yellow rectangle remains static, illustrating contrast. The code uses plain HTML, CSS, and JavaScript with inline SVG, leveraging CSS `transition` and `:hover` pseudo-classes. No JavaScript libraries are used; the rendering relies on the browser’s native SVG support.

Gguththered

91% match