Skip to main content
100%

Shapes with SVG and CSS

✓ Published3🌍 Public
AAzollos
Last edited Jun 5, 2020
Created on Jun 5, 2020
Forked from HTML Starter

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—using static markup in an HTML file, with styling applied via CSS. The SVG elements are scaled and translated using the `transform` attribute, and CSS classes control stroke colors, widths, and line joins. The code uses the React framework and renders purely through SVG, with no interaction or data binding. It highlights the contrast between inline presentation attributes like `fill` and `stroke` versus CSS rules applied through the `.lines` class, showing a straightforward approach to composing and styling vector graphics.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes