🌍 Public
Viewing a saved revision (read-only)
1c3dd3b355d44f7192ef59d54276e3bd
Shapes and Colors with SVG and CSS
This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS, using inline SVG elements in an HTML page. It shows how default black fills contrast with explicit red and green fills, while a group with `fill="#adf6ff"` and `stroke="black"` applies shared styling to multiple shapes. The `.lines` class in styles.css sets stroke color and width, with path-specific overrides for rounded joins and caps. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, and CSS rules handle body margins and overflow without external libraries.
AI-generated descriptionAn example including some commonly used features of SVG.