Greek cross anim

GreekCrossanim.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="480" viewBox="0 0 101 101">
<title>Greek Cross, 4 color anim</title>
<style>
  .c0{fill:oklch(0.6 0.1 70)}
  .c1{fill:oklch(0.6 0.1 315)}
  .c2{fill:oklch(0.6 0.1 250)}
  .c3{fill:oklch(0.6 0.1 135)}
</style>
<defs>
  <pattern id="checker" patternUnits="userSpaceOnUse" width="20" height="20">
    <g fill="#888">
      <rect width="10" height="10"/>
      <rect width="10" height="10" x="10" y="10"/>
    </g>
  </pattern>

  <path id="gc" d="M10,10 v-10 h10 v10  h10 v10 h-10  v10 h-10 v-10  h-10 v-10 z"/>

  <pattern id="tcross" patternUnits="userSpaceOnUse" width="100" height="100"
    patternTransform="matrix(3,-1, 1,3, 0,0) scale(0.316227766)">
    <g style="stroke:#333; stroke-linejoin:round;
      stroke-width:0.5; stroke-opacity:0.7; fill-opacity:0.9">

      <rect width="100%" height="100%" fill="url(#checker)"/>

      <use href="#gc" x="-20" y="0" class="c0"/>
      <use href="#gc" x="0" y="40" class="c0"/>
      <use href="#gc" x="40" y="20" class="c0"/>
      <use href="#gc" x="80" y="0" class="c0"/>

      <use href="#gc" x="10" y="10" class="c1"/>
      <use href="#gc" x="30" y="50" class="c1"/>
      <use href="#gc" x="70" y="30" class="c1"/>

      <use href="#gc" x="-20" y="50" class="c2"/>
      <use href="#gc" x="0" y="-10" class="c2"/>
      <use href="#gc" x="20" y="30" class="c2"/>
      <use href="#gc" x="80" y="50" class="c2"/>

      <use href="#gc" x="-10" y="20" class="c3"/>
      <use href="#gc" x="10" y="60" class="c3"/>
      <use href="#gc" x="30" y="0" class="c3"/>
      <use href="#gc" x="90" y="20" class="c3"/>
    </g>
  </pattern>

  <pattern id="cross" patternUnits="userSpaceOnUse"
    width=" 63.2455532" height=" 63.2455532"
    patternTransform="matrix(3,1, -1,3, 0,0) scale(0.316227766)">

    <animateTransform attributeName="patternTransform"
      type="translate" from="0 0" to="31.6227766 31.6227766"
      begin="0s" dur="10s" repeatCount="indefinite"
      additive="sum"/>

    <rect width="100%" height="100%" fill="url(#tcross)"/>
  </pattern>
</defs>

<g id="cvs" transform="translate(0.5, 0.5)"
  style="stroke:#444; stroke-width:1">
    <rect x="-0.5" y="-0.5" width="100%" height="100%" fill="url(#cross)"/>
</g>
</svg>