Squares

    <svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circ">
            <circle cx="100" cy="100" fill="white">
                <animate attributename="r" begin="0s" dur="5s" repeatcount=
                "indefinite" values="75;100;75"></animate>
            </circle>
        </mask>
    </defs>
    <symbol id="sq">
        <rect height="20" width="20"></rect>
    </symbol>
    <symbol id="grid">
        <g style="mask:url(#circ)">
            <title>Squares</title>
            <use x="30" xlink:href="#sq" y="30">
                <animate attributename="fill" begin="0s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="60" xlink:href="#sq" y="30">
                <animate attributename="fill" begin="0s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="90" xlink:href="#sq" y="30">
                <animate attributename="fill" begin="0s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="120" xlink:href="#sq" y="30">
                <animate attributename="fill" begin="0s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="150" xlink:href="#sq" y="30">
                <animate attributename="fill" begin="0s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="30" xlink:href="#sq" y="60">
                <animate attributename="fill" begin="0.25s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="60" xlink:href="#sq" y="60">
                <animate attributename="fill" begin="0.25s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="90" xlink:href="#sq" y="60">
                <animate attributename="fill" begin="0.25s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="120" xlink:href="#sq" y="60">
                <animate attributename="fill" begin="0.25s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="150" xlink:href="#sq" y="60">
                <animate attributename="fill" begin="0.25s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="30" xlink:href="#sq" y="90">
                <animate attributename="fill" begin="0.5s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="60" xlink:href="#sq" y="90">
                <animate attributename="fill" begin="0.5s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="90" xlink:href="#sq" y="90">
                <animate attributename="fill" begin="0.5s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="120" xlink:href="#sq" y="90">
                <animate attributename="fill" begin="0.5s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="150" xlink:href="#sq" y="90">
                <animate attributename="fill" begin="0.5s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="30" xlink:href="#sq" y="120">
                <animate attributename="fill" begin="0.75s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="60" xlink:href="#sq" y="120">
                <animate attributename="fill" begin="0.75s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="90" xlink:href="#sq" y="120">
                <animate attributename="fill" begin="0.75s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="120" xlink:href="#sq" y="120">
                <animate attributename="fill" begin="0.75s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="150" xlink:href="#sq" y="120">
                <animate attributename="fill" begin="0.75s" dur="5s"
                repeatcount="indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="30" xlink:href="#sq" y="150">
                <animate attributename="fill" begin="1s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="60" xlink:href="#sq" y="150">
                <animate attributename="fill" begin="1s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="90" xlink:href="#sq" y="150">
                <animate attributename="fill" begin="1s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="120" xlink:href="#sq" y="150">
                <animate attributename="fill" begin="1s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <use x="150" xlink:href="#sq" y="150">
                <animate attributename="fill" begin="1s" dur="5s" repeatcount=
                "indefinite" values=
                "cyan; magenta; yellow; black; cyan"></animate>
            </use>
            <animatetransform attributename="transform" attributetype="xml"
            dur="10s" repeatcount="indefinite" type="rotate" values=
            "0 100 100; 360 100 100"></animatetransform>
        </g>
    </symbol>
    <use xlink:href="#grid"></use>
    <use xlink:href="#grid">
        <transform x="10"/>
    </use>
    </svg>