Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

9cd055688f414877a2f31a449eaf7250

SVG Fundamentals

0 stars0🌍 Public
LLashika Arunachalam
Last edited Apr 11, 2023
Created on Apr 11, 2023
Forked from HTML Starter

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—as static elements in a 960×500 viewport. It uses raw SVG markup within an HTML document, with no JavaScript libraries. Each shape illustrates basic attributes like fill, stroke, and coordinates, including a red inner circle layered over a larger black circle and a yellow rectangle with a navy border. The path uses the `d` attribute to define a straight polyline, while the line connects from the origin to (100,100).

AI-generated description

A Demonstration of SVG Shapes.