start from scratch
Three overlapping shapes illustrate basic SVG layering in a simple static scene. A black circle sits at the upper left, followed by a red circle offset to the right, and finally a green rectangular outline encloses both. Each subsequent element renders on top of the previous ones, demonstrating paint order. The example uses raw SVG markup inside an HTML document, with circle and rect elements positioned via cx, cy, r, x, y, width, and height attributes. No JavaScript libraries or external data are involved; the rendering depends solely on the browser’s SVG parser.