Skip to main content
SimilarExport ZIP
100%

Fork of SVG Animations using CSS transitions

✓ Published0🌍 Public
Jjsoudeer
Last edited Jun 8, 2022
Created on Jun 7, 2022

A static SVG chart of geometric bars and lines responds to mouse hover using CSS transitions from the w3schools tutorial. Each rectangle and circle animates all properties over one or ten seconds, changing fill color, stroke width, and stroke color on hover. The example directly styles SVG elements with CSS transition declarations to demonstrate smooth color and sizing effects 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 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
86% match
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
86% 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
86% 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
83% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

Shapes and colors transition between transparent and opaque states, with SVG elements responding to hover. Static circles and rectangles demonstrate inherited fill and stroke properties, while a JavaScript-generated path uses relative line commands to construct a polyline. The example applies SVG and CSS, using `getAttribute` and `setAttribute` to modify the path’s `d` attribute, alongside CSS transitions on `opacity` and `stroke-width` for interactive feedback.

Sserebryanaya.n@gmail.com
81% 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
81% 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
81% 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
81% match