Javascript A6

100%

✓ Published2🌍 Public

Last edited Dec 29, 2022

Created on Dec 29, 2022

This example demonstrates a blank interactive SVG canvas where a single rectangle with the ID `change-hover` transitions its fill color to green over three seconds when hovered, using CSS transitions. The page sets up basic JavaScript syntax—variables, objects, loops, and functions—commented out for educational reference, but no active D3 or data visualization code executes. The rendering is plain SVG embedded directly in HTML, with no external data sources or libraries beyond standard CSS and JavaScript.

AI-generated description

JS Basics

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG shape styling and interaction, using a single red circle with a thick black stroke on a plain background. Hovering over the circle triggers a CSS transition that gradually changes its fill to green and expands its stroke width over three seconds. The implementation relies on inline SVG elements within an HTML page, styled entirely through CSS, while the accompanying JavaScript uses `select` from D3 version 7 to replace the body's text content, showing a minimal D3 setup.

Aayo

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Hhelloelectro

78% match

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

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

78% match

Loading thumbnail…

d3 course

This example demonstrates a single red rectangle that smoothly transitions to green and dramatically thickens its stroke when hovered, using CSS transitions on SVG `rect` elements. The code relies on plain HTML, CSS, and JavaScript, with no external libraries or data sources. It sets initial styles for the rectangle and defines a hover state, allowing the browser to interpolate the fill color and stroke width over three seconds. The empty script tag suggests the visualization is static, with all interaction handled purely through CSS.

AAlexander Garzo

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

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

77% match