CSS fill-rule Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.examples {
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.example {
    text-align: center;
}

.shape {
    fill: #ff8c00;
    stroke: #333;
    stroke-width: 2;
}

.nonzero .shape {
    fill-rule: nonzero;
}

.evenodd .shape {
    fill-rule: evenodd;
}

figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}
</style></head><body><div class="examples">
    <figure class="example nonzero">
        <svg viewBox="0 0 200 200" width="200" height="200" aria-hidden="true">
            <path class="shape" d="M10 10 H190 V190 H10 Z M50 50 H150 V150 H50 Z" />
        </svg>
        <figcaption>fill-rule: nonzero</figcaption>
    </figure>

    <figure class="example evenodd">
        <svg viewBox="0 0 200 200" width="200" height="200" aria-hidden="true">
            <path class="shape" d="M10 10 H190 V190 H10 Z M50 50 H150 V150 H50 Z" />
        </svg>
        <figcaption>fill-rule: evenodd</figcaption>
    </figure>
</div></body></html>