cyb/src/components/Dot/Dot.module.scss

$animation-time: 2.3s;

.dot {
  --size: 4px;

  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  position: relative;

  width: var(--size);
  height: var(--size);

  --color-r: 0;
  --color-b: 0;
  --color-g: 0;

  &.color_ {
    &blue {
      --color-r: 31;
      --color-b: 203;
      --color-g: 225;
    }

    &red {
      --color-r: 255;
      --color-b: 92;
      --color-g: 0;
    }

    &green {
      --color-r: 122;
      --color-b: 250;
      --color-g: 161;
    }

    &purple {
      --color-r: 246;
      --color-b: 43;
      --color-g: 253;
    }

    &yellow {
      --color-r: 255;
      --color-g: 0;
      --color-b: 217;
    }
  }

  background-color: rgb(var(--color-r), var(--color-b), var(--color-g));
}

.animation {
  transition: all 1s;

  animation: pulse $animation-time infinite alternate;
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgb(var(--color-r),
        var(--color-b),
        var(--color-g));
    opacity: 0.2;
  }

  100% {
    box-shadow: 0px 0px 10px 2px rgb(var(--color-r), var(--color-b), var(--color-g));
  }
}