SVG Transition rectangle

100%

SVG Transition rectangle

✓ Published0🌍 Public

Last edited Jun 6, 2022

Created on Jun 6, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

CSS Transitions

This example demonstrates CSS transitions applied to SVG elements, showing how a yellow rectangle scales, changes fill color, and alters stroke properties when hovered. The rectangle’s transition is defined for fill (0.5s), transform (1s), stroke (1s), and stroke-width (2s), with a hover state triggering red fill, 1.2× scale, and thicker green stroke. The code uses a plain HTML page with inline CSS and JavaScript, embedding an SVG element directly in the markup. The SVG has a grey background with a red border, centered on a pink page.

AAlim Bolar

92% match

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

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

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

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

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

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

88% match