Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

9c4c0ca29a7748b1af595bdd1a50b894

SVG Fundamentals

0 stars0🌍 Public
Hhfator
Last edited Nov 9, 2023
Created on Nov 9, 2023
Forked from HTML Starter

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—drawn directly within an HTML page. It shows how CSS and JavaScript can be used to define and render vector graphics. The code uses raw SVG elements with inline attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke`, alongside the `fill` and `stroke-width` properties. The SVG canvas is set to 960 by 500 pixels, displaying basic shapes in red, green, blue, and black. A path element connects points with a straight line, while the line and rectangle include distinct stroke styling.

AI-generated description

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

See also React Starter.