Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamental

Public visualization

Viewing a saved revision (read-only)

7f3577eb6e124262b15f90f0de7ca7f4

SVG Fundamental

0 stars0🌍 Public
Hhuy1651995
Last edited Nov 3, 2022
Created on Nov 3, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.