Shapes and Colors with SVG and CSS
✓ Published1🌍 Public
This example demonstrates the rendering of primitive shapes—circles, rectangles, lines, and paths—using SVG elements with both inline presentation attributes and external CSS styling. The scene shows how default black fills appear on the first row, then explicit fill colors like red and green on the second, and a third group applies a light blue fill with a black stroke via a parent `<g>` element. CSS classes on the line and path elements set stroke colors, dash styles, and rounded line joins and caps. The SVG is embedded directly in HTML, with the CSS file defining page margins and shape-specific properties. The markup uses explicit coordinates and transforms to position the shapes.
AI-generated descriptionAn example including some commonly used features of SVG.
MIT Licensed