<!DOCTYPE html>
<html>
<head>
<style>
circle {
paint-order: stroke fill;
}
</style>
</head>
<body>
<h1>paint-order: stroke fill</h1>
<p>Default is to paint the circle with fill first, then stroke. Here, the order is reveresed, and so the outcome is different:</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="10" fill="yellow" />
</svg>
<p><strong>Tip:</strong> Try to reverse the order of fill and stroke, or remove paint-order property entirely and paint-order becomes the default order.</p>
</body>
</html>