Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

9e3458a120ff4ebeaf6726657f423107

SVG Fundamentals

1 star0🌍 Public
Ccovertjustice
Last edited Nov 1, 2022
Created on Nov 1, 2022
Forked from HTML Starter

This example demonstrates basic SVG shape elements in a static 500x500 canvas, showing how circles, rectangles, lines, and paths are defined with coordinates and styling attributes. The code uses raw SVG markup directly in the HTML, specifying fill colors, stroke properties, and geometric values such as radius, width, and height for each shape. A red circle, pink rectangle, blue line, and an open path are rendered without any JavaScript libraries or interaction, relying solely on SVG’s built-in rendering capabilities. The path command draws a diagonal line from the top-left to the lower-right area, with a commented-out alternative path left inactive.

AI-generated description

Basic SVG shapes