Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Shapes with SVG and CSS

0 stars1🌍 Public
EEric Torres
Last edited Nov 8, 2021
Created on Nov 8, 2021
Forked from HTML Cars Report

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and polylines—with SVG and style them using CSS. The code uses the SVG API directly in an HTML file, applying attributes like `fill`, `stroke`, and `stroke-width` both inline and through a linked stylesheet. A `transform` groups shapes for scaling and translation, while the `.lines` class controls the stroke appearance of the line and path elements. The rendering is entirely SVG-based, with no JavaScript libraries involved.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed