Demostración de SVG

100%

Demostración de SVG

✓ Published0🌍 Public

Last edited Feb 2, 2023

Created on Feb 2, 2023

This example demonstrates a single SVG rectangle that responds to hover interactions. The rectangle initially renders with a red fill and thin black stroke, then smoothly transitions to a yellow fill with a thicker stroke over three seconds when hovered. The styling and transitions are defined entirely through CSS, utilizing the `rect:hover` pseudo-class and the `transition` property. The page is a minimal HTML document using inline SVG for rendering, with no JavaScript or external libraries involved.

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

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

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, showing how a single rectangle can be rendered with a yellow fill, black stroke, and thick stroke width. It also includes CSS-based hover interactions that change the rectangle's fill to red and its stroke to black. The visualization relies on the SVG `<rect>` element embedded directly in an HTML page, with styling handled through both inline attributes and a `<style>` block using CSS transitions. The rendering approach is pure SVG, with no external JavaScript libraries or data sources involved.

Aaksgooner

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

This example demonstrates a static SVG composition featuring interactive hover effects on geometric shapes. A yellow circle with a red stroke, two blue and red rectangles, a green diagonal line, and a black path are drawn directly on a 1000x1000 canvas. The plain HTML page uses embedded CSS to change fill and stroke colors on hover—circles and rectangles turn black, while the line becomes red. The code relies on standard SVG elements (`circle`, `rect`, `line`, `path`) and CSS pseudo-classes, with no JavaScript or external libraries.

AAlan Beveridge

83% match

Loading thumbnail…

CSS Transitions

This example demonstrates CSS transitions applied to SVG elements, showing how a yellow rectangle scales, changes fill color, and alters stroke properties when hovered. The rectangle’s transition is defined for fill (0.5s), transform (1s), stroke (1s), and stroke-width (2s), with a hover state triggering red fill, 1.2× scale, and thicker green stroke. The code uses a plain HTML page with inline CSS and JavaScript, embedding an SVG element directly in the markup. The SVG has a grey background with a red border, centered on a pink page.

AAlim Bolar

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

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, including circles, a rectangle, and a line. It shows CSS-driven interactivity, where hovering over the rectangle triggers a green fill and expanded stroke width, with a smooth transition over three seconds. The code uses plain SVG elements within an HTML page, styled via CSS selectors like `rect:hover`, and relies on inline attributes such as `fill`, `stroke`, and `stroke-width`. No JavaScript or external libraries are involved; the rendering is purely static SVG with CSS transitions.

JJust-StyX

82% match