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
OOhayouKaminari
Last edited Jan 6, 2020
Created on Jan 6, 2020
Forked from HTML Cars Report

This example demonstrates basic geometric shapes—circles, rectangles, lines, and paths—rendered as scalable vector graphics. The SVG markup uses presentation attributes like `fill` and `stroke` alongside CSS rules in a separate `styles.css` file, where the `.lines` class assigns stroke properties to the polyline and path elements. Styling is applied both directly on elements and through CSS selectors, showing how SVG attributes and stylesheet rules coexist for visual customization. The graphics are scaled by a factor of 1.5 via a transform, with shapes stacked using translations for layered composition.

AI-generated description

An example showing the capabilities of VizHub.

Comments

Sign in to join the discussion.

MIT Licensed