<!DOCTYPE html>
<html>
<head>
<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-548" />
<style>
body {
    border: 2em blue solid;
}
svg {
    background: pink;
}
</style>
</head>
<body>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clippath id="clip1">
        <rect width="8" height="4"></rect>
    </clippath>
    <g clip-path="url(#clip1)">
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clippath id="clip2">
        <rect y="4" width="8" height="4"></rect>
    </clippath>
    <g clip-path="url(#clip2)">
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
<br>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clippath id="clip3">
        <rect width="8" height="2"></rect>
        <rect y="4" width="8" height="2"></rect>
    </clippath>
    <g clip-path="url(#clip3)">
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clippath id="clip4">
        <rect y="2" width="8" height="2"></rect>
        <rect y="6" width="8" height="2"></rect>
    </clippath>
    <g clip-path="url(#clip4)">
        <circle cx="1" cy="1" r="1" fill="green"></circle>
        <circle cx="7" cy="1" r="1" fill="green"></circle>
        <circle cx="1" cy="7" r="1" fill="green"></circle>
        <circle cx="7" cy="7" r="1" fill="green"></circle>
    </g>
</svg>
</body>
</html>
