SVG shapes drawn with declarative markup and CSS styling include circles, rectangles, lines, and a path. The HTML defines a single SVG canvas scaled 1.5x, grouping basic geometric elements across four sections: initial default black shapes, colored shapes using `fill` attributes, a group with a shared `fill` and `stroke`, and a line-and-path group with dedicated CSS classes. The CSS file applies stroke width and color via class selectors like `.lines` and `.lines path` with `stroke-linejoin`. No external libraries are used; the code relies directly on the SVG DOM API and CSS.