Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

52e1c065362543ec8cc9078710b0357b

SVG Fundamentals

0 stars0🌍 Public
JJust-StyX
Last edited May 6, 2022
Created on May 6, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.