SVG rx animation

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate -->

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" fill="#cc0" width="8" height="8" style="--dur: 2s" />
  <rect x="11" y="1" fill="#c0c" width="8" height="8" style="--dur: 4s" />
  <rect x="1" y="11" fill="#0cc" width="8" height="8" style="--dur: 6s" />
  <rect x="11" y="11" fill="#c00" width="8" height="8" style="--dur: 8s" />
</svg>

CSS

html,body,svg {
  height:100%;
  margin:0;
  padding:0;
}

svg rect {
  animation: moveCircle var(--dur) linear infinite;
}
@keyframes moveCircle {
   0% { rx: 1; }
  50% { rx: 4; }
 100% { rx: 1; }
}