svg.x-shape-bg {
  animation: whole-shake 1000ms infinite ease-in-out;
}
@keyframes dot-pulse {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
}
@keyframes whole-shake {
  0% {
    transform: translate(2px, 2px);
  }
  5% {
    transform: translate(-3px, -3px) scale(1.04);
  }
  10% {
    transform: translate(2px, 2px);
  }
  20% {
    transform: translate(2px, 2px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  26% {
    transform: translate(-1px, -1px);
  }
  32% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
}
svg.x-shape-bg .dot {
  transition: all;
  animation: dot-pulse 2s infinite ease-in-out;
  animation-delay: calc(var(--nth-child) * 300ms + 50ms);
}
svg.x-shape-bg .dot:nth-of-type(0) {
  --nth-child: 0;
}
svg.x-shape-bg .dot:nth-of-type(1) {
  --nth-child: 1;
}
svg.x-shape-bg .dot:nth-of-type(2) {
  --nth-child: 2;
}
svg.x-shape-bg .dot:nth-of-type(3) {
  --nth-child: 3;
}
svg.x-shape-bg .dot:nth-of-type(4) {
  --nth-child: 4;
}
svg.x-shape-bg .dot:nth-of-type(5) {
  --nth-child: 5;
}
svg.x-shape-bg .dot:nth-of-type(6) {
  --nth-child: 6;
}
svg.x-shape-bg .dot:nth-of-type(7) {
  --nth-child: 7;
}
svg.x-shape-bg .dot:nth-of-type(8) {
  --nth-child: 8;
}
svg.x-shape-bg .dot:nth-of-type(9) {
  --nth-child: 9;
}
svg.x-shape-bg .dot:nth-of-type(10) {
  --nth-child: 10;
}
svg.x-shape-bg .dot:nth-of-type(11) {
  --nth-child: 11;
}
svg.x-shape-bg .dot:nth-of-type(12) {
  --nth-child: 12;
}
svg.x-shape-bg .dot:nth-of-type(13) {
  --nth-child: 13;
}
svg.x-shape-bg .dot:nth-of-type(14) {
  --nth-child: 14;
}
svg.x-shape-bg .dot:nth-of-type(15) {
  --nth-child: 15;
}
svg.x-shape-bg .dot:nth-of-type(16) {
  --nth-child: 16;
}
svg.x-shape-bg .dot:nth-of-type(17) {
  --nth-child: 17;
}
svg.x-shape-bg .dot:nth-of-type(18) {
  --nth-child: 18;
}
svg.x-shape-bg .dot:nth-of-type(19) {
  --nth-child: 19;
}
svg.x-shape-bg .dot:nth-of-type(20) {
  --nth-child: 20;
}