Shapes and Colors with SVG and CSS
This example demonstrates how SVG shapes and CSS styling can combine to create a static, colorful composition. The code renders circles, rectangles, lines, and a path within a single SVG element, using inline attributes for some fills and CSS classes for others. It shows the effect of grouping elements with transformations, such as scaling and translation, to reposition shapes as a unit. The `.lines` class applies strokes and line joins via CSS, while the SVG elements define geometry directly in the markup.