Skip to main content
SimilarExport ZIP
100%

Fork of SVG Animations using CSS transitions

✓ Published0🌍 Public
LLuiz Domingues
Last edited May 13, 2022
Created on May 13, 2022

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.

AI-generated description

Inspired by w3schools

MIT Licensed

Similar vizzes

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
94% 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
93% match
Loading thumbnail…

Fork of SVG Animations using CSS transitions1

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.

Aalisaipsoc
91% match
Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single SVG canvas displays two red rectangles with black borders. One rectangle is large and centered, while the other is small and placed in the corner. The visualization demonstrates CSS transitions applied to SVG elements, where the `transition: all 3000ms` rule animates any property changes over three seconds. When the mouse hovers over a rectangle, the `rect:hover` pseudo-class triggers a change in fill color to green and increases the stroke-width to 150 pixels.

SSergio
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
88% 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
88% 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
88% match
Loading thumbnail…

Fork of SVG fundamentals E2

This example demonstrates a simple interactive SVG graphic: a single red rectangle with a thick black border that transitions smoothly to a green fill and an even thicker border when hovered. It uses CSS transitions applied directly to SVG `rect` elements, triggered by the `:hover` pseudo-class. The rendering is static SVG within an HTML document, with the transition duration set to 2000 milliseconds. The code relies on native browser CSS support rather than JavaScript libraries, showcasing how SVG styling and animation can be handled purely through stylesheet rules.

Ppanthabuddhi@gmail.com
87% match