Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG

Public visualization

Shapes with SVG

0 stars1🌍 Public
VVarun Khanna
Last edited Oct 5, 2019
Created on Oct 5, 2019

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed directly in HTML. It shows default black shapes, colored fills, and a group with orange fill and black strokes, alongside a green stroked path with rounded line joins. The code uses raw SVG elements within an `<svg>` tag, applying transforms like `scale()` and `translate()`, with styling through an external stylesheet. The rendering approach is pure SVG, with no JavaScript libraries or data binding.

AI-generated description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed