Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

27f05a757693470bbab9fa7d39844d6b

SVG Fundamentals

0 stars1🌍 Public
Mmegan-grannan
Last edited Aug 9, 2023
Created on Aug 7, 2023
Forked from SVG Fundamentals

This example demonstrates the basic building blocks of SVG graphics, including circles, rectangles, a custom path, and a line, all rendered directly on an HTML page. It shows how CSS can animate rectangular elements smoothly over three seconds, and how a hover effect triggers a green fill with a thick stroke. The code uses the native `svg` element and its child tags like `circle`, `rect`, `path`, and `line`, with styling applied via an embedded `<style>` block. It serves as a bare-minimum introduction to SVG fundamentals using only HTML and JavaScript without any external libraries.

AI-generated description

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

See also React Starter.