:root {
  --color-1: #375504;
  --color-2: #375504d2;
  --color-3: #375504c3;
  --color-4: #375504a2;
  --color-5: #37550467;
  --color-6: #37550443;
  --color-7: #3755041e;
  --color-8: #412308;
}

.funBox {
    width: 480px;    
    height: 250px;
}

.shape {
  cy: 50px;
  r: 20px;
  fill: black;
  animation: moveCircle 2000ms ease-in-out both infinite;
}

.shape:nth-child(1) {
  cx: 40px;
  fill: var(--color-1);
}

.shape:nth-child(2) {
  cx: 100px;
  fill: var(--color-2);
  animation-delay: 100ms;
}

.shape:nth-child(3) {
  cx: 160px;
  fill: var(--color-3);
  animation-delay: 200ms;
}

.shape:nth-child(4) {
  cx: 220px;
  fill: var(--color-4);
  animation-delay: 300ms;
}

.shape:nth-child(5) {
  cx: 280px;
  fill: var(--color-5);
  animation-delay: 400ms;
}

.shape:nth-child(6) {
  cx: 340px;
  fill: var(--color-6);
  animation-delay: 500ms;
}
.shape:nth-child(7) {
  cx: 400px;
  fill: var(--color-7);
  animation-delay: 600ms;
}
.shape:nth-child(8) {
  cx: 460px;
  fill: var(--color-8);
  animation-delay: 700ms;
}

@keyframes moveCircle {
  50% {
    cy: 55px;
    r: 19px;
  }
}