SVG Animations using CSS transitions

100%

SVG Animations using CSS transitions

✓ Published8🌍 Public

Last edited Mar 13, 2021

Created on Mar 8, 2021

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.

AI-generated description

Inspired by w3schools

MIT Licensed

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

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

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

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

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

90% match

Loading thumbnail…

SVG Animations

This example shows a single red rectangle centered on a blank SVG canvas. Hovering the mouse over the rectangle triggers a smooth CSS transition that changes its fill color to green and expands its stroke thickness from 20 to 100 pixels over 3 seconds. The code uses raw SVG elements inside an HTML page, relying on the CSS `transition` property to animate the state change. The rectangle’s starting dimensions and position are set via SVG attributes, while the hover effect is defined using the `:hover` pseudo-class.

Zzemui

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