JSFiddle - React, Tailwind, and code Playground

HTML

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px">
  <g transform="translate(100, 100)">
    <circle r="20" class="circle"></circle>
  </g>
  <g transform="translate(100, 200)">
    <circle r="20" class="circle"></circle>
  </g>
  <g transform="translate(200, 100)">
    <circle r="20" class="circle"></circle>
  </g>
    <g transform="translate(200, 200)">
    <circle r="20" class="circle"></circle>
  </g>
</svg>

CSS

body{
  background-color: #200C31;
}

.circle {
  stroke: #90B0C6;
  stroke-width: 2px;
  fill: transparent;
  opacity: 0;
  animation-name: bubble_kf;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  transform: scale(4);
}

@keyframes bubble_kf {
  from {
    opacity: 1;
    transform: scale(.1);
  }
}