Skip to main content
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Wwindwardpassage
Last edited Jan 17, 2020
Created on Jan 17, 2020

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 description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes