Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

c734bc1e7dc14ccabee0fbdcfe332336

SVG Fundamentals

0 stars0🌍 Public
NNeeraj Chauhan
Last edited Mar 17, 2024
Created on Mar 17, 2024
Forked from HTML Starter

This example demonstrates fundamental SVG shapes using static markup, showing how basic geometric elements like circles, rectangles, and lines are drawn on a canvas. It displays a red circle, a white square with a black border, and a horizontal red line, each positioned and styled directly through SVG attributes. The code uses no external libraries, relying solely on native SVG elements such as `<circle>`, `<rect>`, and `<line>` within an HTML page. Styling is applied via inline attributes like `fill`, `stroke`, and `stroke-width`, illustrating the manual construction of vector graphics without data binding or interactivity. The rendering approach is explicit, with fixed coordinates and dimensions defining each shape’s placement.

AI-generated description

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

See also React Starter.