Fork of SVG Animations using CSS transitions1

100%

Fork of SVG Animations using CSS transitions1

✓ Published0🌍 Public

Last edited Oct 5, 2022

Created on Sep 27, 2022

Forked from SVG Animations using CSS transitions

A single red rectangle with a thick yellow border occupies the center of an SVG canvas. When hovered over, the rectangle smoothly transitions its fill color to green and expands its border width to 100 pixels. The animation is implemented using pure CSS transitions applied to the SVG `<rect>` element, with a 3000-millisecond duration for all property changes. The example demonstrates how CSS properties like `fill` and `stroke-width` can animate SVG shapes without JavaScript.

AI-generated description

Inspired by w3schools

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle with a thick black border changes its fill and stroke in response to hover. Using only CSS transitions, the rectangle’s fill transitions to light green, its stroke to darkmagenta, and its stroke width expands from 20px to 100px over three seconds. The code applies the `transition` property with `all` duration to the `rect` selector, triggered by the `:hover` pseudo-class, without any JavaScript or D3 involvement.

LLuiz Domingues

91% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle transitions its fill color and stroke width over three seconds when hovered. The example demonstrates CSS transitions applied directly to SVG elements via the `transition` property, with the `rect:hover` pseudo-class triggering the change. This static, inline HTML file uses no external JavaScript libraries, relying purely on CSS present in the style block. The rectangle starts with a thick black stroke and red fill, then shifts to green with a much thicker stroke on mouseover.

Wwasti

91% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle animates its fill color and stroke width in response to mouse hover, smoothly transitioning over three seconds. The example demonstrates CSS transitions applied directly to SVG elements, using the `transition: all 3000ms` property on the `rect` selector and a `:hover` pseudo-class to trigger the visual change. The code defines a 960x500 SVG canvas with one 500x250 rectangle, and relies entirely on CSS rather than JavaScript libraries or animation APIs.

JJuan Corrales Correyero

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

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

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

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

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

87% match