Skip to main content
100%

Shapes with SVG and CSS

✓ Published1🌍 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.

MIT Licensed

Similar vizzes