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">
      <animateTransform attributeName="transform" type="scale" additive="sum" from="0 0" to="4 4" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>
      <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite" />
    </circle>
  </g>
  
</svg>

CSS

body{
  background-color: #200C31;
}

.circle {
  stroke: #90B0C6;
  stroke-width: 2px;
  fill: transparent;
}