Untitled

100%

✓ Published0🌍 Public

Last edited Dec 10, 2023

Created on Dec 9, 2023

A red circle remains static until hovered, at which point it smoothly scales to twice its size. This interaction is achieved through a CSS `transition` on the `transform` property, triggered by the `:hover` pseudo-class. The example uses raw HTML and SVG within a single `index.html` file, with no external JavaScript or libraries, demonstrating a simple yet effective hover effect in a React-compatible format.

AI-generated description

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

Similar vizzes

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

81% match

Loading thumbnail…

Untitled

A red circle sits at the center of a full-window SVG canvas. When the mouse enters the circle, a green circle and a black circle appear on top of it, and the red circle transitions its radius to 100 with a 750ms duration. On mouse leave, the circle returns to a radius of 40 and its red fill over 500ms. The example uses D3 v7 to append SVG elements and the `transition` API for animation, while `d3.interpolateRound` is called to compute a rounded interpolation value.

Ssukumardunn

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

80% match

Loading thumbnail…

SVG Experiment

This example demonstrates the interactive styling capabilities of SVG graphics, using CSS transitions to create a smooth visual response when the user hovers over a blue circle, which gradually turns red and thickens its border over three seconds. The visualization composes a variety of SVG primitives, including lines, a circle, and a path, all rendered directly within the HTML page using inline SVG markup. The implementation relies on vanilla CSS and JavaScript, with no external libraries, and is built using React as indicated by the project metadata, though the code itself is a standalone HTML file.

MMinchan Jun

80% match

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

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

79% match

Loading thumbnail…

SVG fundamentals

A single red circle on a black background demonstrates fundamental SVG styling and interaction. The circle is drawn with a thick white stroke and responds to hover by gradually transitioning its fill to green and expanding its stroke width over three seconds. The example uses plain SVG elements with CSS rules for the shape’s initial appearance and the `:hover` state, leveraging the `transition` property for animation. No external libraries are used; the markup and styling are entirely self-contained in the HTML file.

Oomorujio@gmail.com

79% match

Loading thumbnail…

SVG ANIMATIONS

A single red square with a black outline sits centered on a 960 by 500 SVG canvas. CSS transitions animate both the fill color and stroke width over three seconds when the rectangle is hovered, turning it green and expanding its border. The example uses SVG markup with embedded CSS styling and the `:hover` pseudo-class, with no external JavaScript libraries.

Rroyal8466

79% match