Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

0c8bde50aee24ba0b54aae2061309da9

SVG Fundamentals

0 stars2🌍 Public
DDilara Bozkurt
Last edited Jan 2, 2025
Created on Dec 30, 2024
Forked from HTML Starter

This example demonstrates three basic SVG shapes—a red circle, a yellow rectangle with a navy border, and a diagonal line—positioned on a 960×500 canvas. The code uses raw SVG elements (`circle`, `rect`, `line`) directly in HTML, with attributes such as `cx`, `cy`, `r`, `stroke`, and `stroke-width` controlling geometry and styling. No JavaScript libraries are involved; the rendering is purely declarative SVG. The visualization serves as a minimal reference for how SVG coordinates, fill colors, and strokes work in a standalone document.

AI-generated description

A demonstration of SVG shapes