Fork of SVG fundamentals E2

100%

Fork of SVG fundamentals E2

✓ Published0🌍 Public

Last edited Feb 8, 2024

Created on Jan 29, 2024

This example demonstrates a simple interactive SVG graphic: a single red rectangle with a thick black border that transitions smoothly to a green fill and an even thicker border when hovered. It uses CSS transitions applied directly to SVG `rect` elements, triggered by the `:hover` pseudo-class. The rendering is static SVG within an HTML document, with the transition duration set to 2000 milliseconds. The code relies on native browser CSS support rather than JavaScript libraries, showcasing how SVG styling and animation can be handled purely through stylesheet rules.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG fundamentals E2

A red rectangle with a thick black border sits centered in an SVG canvas. The example demonstrates CSS transitions triggered by hover, causing the rectangle to gradually change its fill color to green while its stroke width expands from 20px to 100px over three seconds. The code uses plain SVG elements with inline CSS style rules, applying the `transition` property to all animated attributes. No external libraries or data sources are involved; the visualization relies solely on native SVG and CSS animation capabilities within an HTML document.

Ppanthabuddhi@gmail.com

88% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle with a thick black border changes its fill and stroke in response to hover. Using only CSS transitions, the rectangle’s fill transitions to light green, its stroke to darkmagenta, and its stroke width expands from 20px to 100px over three seconds. The code applies the `transition` property with `all` duration to the `rect` selector, triggered by the `:hover` pseudo-class, without any JavaScript or D3 involvement.

LLuiz Domingues

87% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle transitions its fill color and stroke width over three seconds when hovered. The example demonstrates CSS transitions applied directly to SVG elements via the `transition` property, with the `rect:hover` pseudo-class triggering the change. This static, inline HTML file uses no external JavaScript libraries, relying purely on CSS present in the style block. The rectangle starts with a thick black stroke and red fill, then shifts to green with a much thicker stroke on mouseover.

Wwasti

87% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle animates its fill color and stroke width in response to mouse hover, smoothly transitioning over three seconds. The example demonstrates CSS transitions applied directly to SVG elements, using the `transition: all 3000ms` property on the `rect` selector and a `:hover` pseudo-class to trigger the visual change. The code defines a 960x500 SVG canvas with one 500x250 rectangle, and relies entirely on CSS rather than JavaScript libraries or animation APIs.

JJuan Corrales Correyero

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

85% match

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates fundamental SVG rendering by displaying a single red rectangle with a thick black border inside a 900-by-900 SVG canvas. The rectangle transitions over three seconds when hovered, changing its fill to green and expanding its stroke width, using CSS properties for both styling and animation. The code relies on basic SVG elements and CSS hover states, with no additional JavaScript libraries or data sources beyond the static markup.

OOscar Muindi

85% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions1

A single red rectangle with a thick yellow border occupies the center of an SVG canvas. When hovered over, the rectangle smoothly transitions its fill color to green and expands its border width to 100 pixels. The animation is implemented using pure CSS transitions applied to the SVG `<rect>` element, with a 3000-millisecond duration for all property changes. The example demonstrates how CSS properties like `fill` and `stroke-width` can animate SVG shapes without JavaScript.

Aalisaipsoc

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