TestHoverNita

100%

✓ Published0🌍 Public

Last edited Mar 15, 2021

Created on Mar 15, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

test

A full-width red rectangle sits against a plain white background, its thick black stroke defining the shape. The example showcases a simple CSS and SVG interaction, where the rectangle transitions to green on hover. Written as a minimal HTML page, it uses inline CSS for styling and transitions, while JavaScript is included but not yet utilized. The SVG element is drawn directly in the markup, offering a straightforward demonstration of static vector graphics and hover feedback.

88ingo8ongo

83% match

Loading thumbnail…

Copying Nita's work

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.

Aabhineetsingh10

81% match

Loading thumbnail…

test

This example displays a single red rectangle on an SVG canvas. The rectangle is defined with inline attributes and CSS styles that apply a border and fill color. Interactive behavior is included: hovering over the shape triggers a CSS transition, gradually changing its fill to green and expanding its stroke width over three seconds. The code uses plain HTML, CSS, and SVG, with no external libraries. The rendering relies on the SVG `rect` element and CSS `:hover` and `transition` properties.

Ssirenajbpearl@gmail.com

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

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates a single red rectangle drawn on an SVG canvas, with CSS-driven hover effects that transition its fill color to green and expand its stroke width over three seconds. The page uses a minimal HTML structure with inline CSS styling and JavaScript-free SVG markup. The rectangle’s initial appearance is defined by the `rect` element’s `x`, `y`, `width`, and `height` attributes, while the CSS `transition` property animates the `fill` and `stroke-width` changes on hover. The code relies solely on basic SVG and CSS, without any external libraries.

LLukas731

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

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

79% match

Loading thumbnail…

Hello HTML

This example shows a single red square rendered in SVG, which transitions to green with a thicker border when hovered. The page uses plain HTML, CSS, and JavaScript, with a 1000x1000 SVG element containing a `<rect>`. The CSS defines the shape's stroke, fill, and a 3-second transition on those properties, triggered by the `:hover` pseudo-class. No external libraries are used; it demonstrates basic SVG and CSS interactivity.

Ssreerajchundayil

79% match