SVG animation using CSS transitions

100%

SVG animation using CSS transitions

✓ Published0🌍 Public

Last edited May 17, 2022

Created on May 17, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SVG Animation using CSS Transition

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.

Ddaigou65

94% match

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

93% 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

93% 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

92% 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

91% 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

91% match

Loading thumbnail…

SVG Animation using CSS transitions

This example shows a single SVG circle that animates its fill color and stroke width when hovered. The transition is defined in CSS using the `transition: all 3000ms` rule, which smoothly interpolates the circle’s `fill` and `stroke-width` properties between its normal state and its `:hover` state. The circle is rendered in a plain HTML page with inline SVG, using no JavaScript libraries—only CSS and the SVG element itself. The hover effect changes the circle from blue to red and expands its stroke from 20px to 100px.

Nnim@brejnholt.dk

89% 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

89% match