Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

d0195a62f8a140d38cef25947dbb0c39

Shapes with SVG and CSS

0 stars1🌍 Public
Mmorjyooo
Last edited May 16, 2021
Created on Aug 18, 2020

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, and lines—using inline SVG markup combined with an external CSS stylesheet. It shows the application of presentation attributes like `fill`, `stroke`, and `stroke-width` directly on SVG elements, as well as the use of the `<g>` element to group shapes and apply a unified `transform` and style properties to them collectively. The rendering relies entirely on the browser's native SVG support, with no JavaScript libraries involved.

AI-generated description