Hello HTML

100%

✓ Published0🌍 Public

Last edited Jul 31, 2022

Created on Jul 30, 2022

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.

AI-generated description

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

Similar vizzes

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

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

85% match

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG shapes and interactive CSS styling. It displays a red rectangle, a green-bordered circle, and a thick black line on an 800 by 800 canvas. The rectangle uses a CSS transition on all properties, causing its fill and stroke-width to animate over three seconds when hovered, turning green and widening its border. The code directly uses SVG elements (`rect`, `circle`, `line`) and CSS selectors, including a `rect:hover` pseudo-class and the `transition` property.

Hhuy1651995

85% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, showing a green rectangle with a thick black outline and a blue path. The code uses raw SVG elements within an HTML page, including `circle`, `path`, and `rect`, and applies CSS transitions and `:hover` pseudo-classes to animate changes in stroke color, width, and path data. The rectangle transitions from green to red over eight seconds on hover, while the path’s stroke shifts to red and its `d` attribute morphs over two seconds, illustrating basic vector graphic interactivity and styling.

Aavia62490

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

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering and styling using a single red rectangle with a black stroke on a 960-by-500 canvas. It shows how CSS transitions animate the rectangle’s fill color and stroke width over three seconds when hovered. The code directly uses the SVG `rect` element, CSS `:hover` pseudo-class, and the `transition` property in an HTML page with embedded styles. No JavaScript libraries are involved.

Sshyan

84% match

Loading thumbnail…

SVG training

This example demonstrates basic SVG interactivity and styling through pure HTML, CSS, and JavaScript without any external libraries. It shows three black rectangles on an 800x600 canvas, where hovering over a rectangle triggers a CSS transition that gradually changes its fill color to green and expands its dimensions and position over three seconds. The code utilizes CSS pseudo-class `:hover` and the `transition` property, while the first rectangle is wrapped in an anchor tag linking to google.com. The rendering relies entirely on native SVG elements within the HTML document.

KkazGuido

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

84% match