Copying Nita's work

100%

Copying Nita's work

✓ Published0🌍 Public

Last edited Jul 16, 2022

Created on Jul 16, 2022

Three blue rectangles sit in a row on a black-outlined SVG canvas. This example demonstrates interactive CSS transitions on SVG elements using plain React within an HTML page. Each rectangle is assigned a distinct CSS class, and hovering over one gradually changes its fill color and dramatically thickens its stroke over three seconds via the `transition: all 3000ms` rule. The code relies on standard SVG markup and CSS hover pseudo-classes, with no external JavaScript libraries beyond React for structure.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SVG Transition rectangle

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.

Gguththered

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

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

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

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

81% match

Loading thumbnail…

TestHoverNita

This example shows a single red rectangle with a blue border on an SVG canvas. When hovered, the rectangle smoothly transitions its fill to green and its stroke to black while reducing the border width, using CSS transitions over 2000 milliseconds. The page is built with React in a minimal HTML setup, though the visible interaction relies entirely on native SVG and CSS hover styling rather than JavaScript or d3 APIs. The file is authored by PierreNiberon as part of a VizHub example.

PPierreNiberon

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

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a single SVG rectangle that changes color and stroke properties when hovered. The rectangle is initially orange with a cyan stroke and transitions smoothly over 3 seconds to cyan with a thick green stroke on mouseover. Built with React using inline CSS styles and SVG elements, it shows how CSS transitions can animate SVG shape attributes directly through the `transition` property applied to `rect` selectors. The rendered output relies on the browser’s SVG rendering engine, with no external data or JavaScript logic beyond basic event handling.

JJerlon Buenconsejo

80% match