Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

27c110ea5d214883be94102994ce9916

SVG Fundamentals

0 stars0🌍 Public
Ccharlesjou
Last edited Jun 13, 2022
Created on Jun 13, 2022
Forked from HTML Starter

This example demonstrates fundamental SVG shape elements, including rectangles, circles, ellipses, lines, polylines, polygons, and paths, all rendered directly on a blank HTML page. The visualization shows how each primitive is constructed using basic `x`, `y`, `width`, `height`, `r`, `cx`, `cy`, and `d` attributes without any JavaScript libraries. The code relies solely on the native SVG namespace embedded in the markup, with styling applied through inline `fill` and `stroke` properties. It serves as a minimal, dependency-free reference for understanding vector graphics syntax in the browser.

AI-generated description

A demonstratio of SVG shapes.