Shapes with SVG and CSS
✓ Published1🌍 Public
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 descriptionAn example showing the capabilities of VizHub.
MIT Licensed