Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

6f9cfba7231a4120a9719176141c447f

SVG Fundamentals

0 stars0🌍 Public
Eeliannec
Last edited Aug 23, 2022
Created on Aug 23, 2022
Forked from HTML Starter

This example demonstrates the basic building blocks of SVG graphics, showing a pair of red circles stacked above a red triangle. The code uses raw SVG elements—specifically `<circle>` and `<polygon>`—within an inline `<svg>` container. Rather than relying on a JavaScript library like D3, it directly defines the shapes’ positions and radii through SVG attributes, such as `cx`, `cy`, and `r`, and sets a shared fill color. The rendering approach is purely declarative markup, with the shapes’ coordinates and sizes hard-coded in the HTML file to illustrate fundamental vector-drawing syntax.

AI-generated description

Demonstration of SVG shapes