Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

7836b688974a47499dda51a572be18f4

SVG Fundamentals

0 stars1🌍 Public
NNico-Nico
Last edited Dec 31, 2022
Created on Dec 28, 2022
Forked from HTML Starter

This example demonstrates basic SVG shape styling and interactivity through two circles rendered directly in an HTML document. The first circle uses static attributes for fill, stroke, and stroke-width, while the second employs a CSS class with a hover effect that transitions its fill color and adds a stroke over 300 milliseconds. The code uses plain SVG elements, CSS transitions, and inline JavaScript-free markup within a React-free environment, with the SVG canvas placed directly in the body alongside text.

AI-generated description

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

See also React Starter.