<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- a => b => a -->
        <pattern id="a" x="0" y="0" width=".25" height=".25">
            <rect fill="lime" width="100%" height="100%"/>
            <rect fill="url(#b)" width="100%" height="100%"/>
        </pattern>
        <pattern id="b" xlink:href="#a"/>
        
        <!-- l => m => n => l -->
        <pattern id="l" x="0" y="0" width=".25" height=".25">
            <rect fill="lime" width="100%" height="100%"/>
            <rect fill="url(#m)" width="100%" height="100%"/>
        </pattern>
        <pattern id="m" xlink:href="#n"/>
        <pattern id="n" xlink:href="#l"/>
        
        <!-- p => q -->
        <pattern id="p" x="0" y="0" width=".25" height=".25">
            <rect fill="lime" width="100%" height="100%"/>
            <rect fill="url(#q)" width="100%" height="100%"/>
        </pattern>
        <pattern id="q"/>
        
        <!-- t => s -->
        <pattern id="s" x="0" y="0" width=".25" height=".25">
            <rect fill="lime" width="100%" height="100%"/>
            <rect id="r" width="100%" height="100%"/>
        </pattern>
        <pattern id="t" xlink:href="#s"/>
    </defs>
    <g fill="none" stroke="black" stroke-width="1">
        <circle cx="75" cy="75" fill="url(#a)" r="50"/>
        <circle cx="200" cy="75" fill="url(#b)" r="50"/>

        <circle cx="75" cy="200" fill="url(#l)" r="50"/>
        <circle cx="200" cy="200" fill="url(#m)" r="50"/>
        <circle cx="325" cy="200" fill="url(#n)" r="50"/>
    
        <circle cx="75" cy="325" fill="url(#p)" r="50"/>
        <circle cx="200" cy="325" fill="url(#q)" r="50"/>
    
        <circle cx="75" cy="450" fill="url(#s)" r="50"/>
        <circle cx="200" cy="450" fill="url(#t)" r="50"/>
    </g>
    <script>
        // Add q => p to get p => q => p
        document.getElementById("q").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#p");        
        
        // Add s => t to get s => t => s
        document.getElementById("r").setAttribute("fill", "url(#t)");
        
        // Force layout
        document.documentElement.removeAttribute("class");
    </script>
</svg>