JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     xml:space="preserve">
     <g>
     <circle class="pulse" fill="none" stroke="#FF0000" stroke-miterlimit="5" cx="40" cy="40" r="2" />
    <circle class="" fill="#FF9C00" cx="40" cy="40" r="2" />
    </g>
    
    <g>
     <circle class="pulse" fill="none" stroke="#FF0000" stroke-miterlimit="5" cx="65" cy="65" r="2" />
    <circle class="" fill="#FF9C00" cx="65" cy="65" r="2" />
    </g>
</svg>

CSS

@-webkit-keyframes svg_pulse {
	 0% {
	   -webkit-transform: scale(1);
	   stroke-width: 1;
	   opacity: 1;
	 }

	 50% {
		 opacity: 1;
	 }
	 100% {
		 -webkit-transform: scale(4);
     stroke-width: 0.25;
		 opacity: 0;
	 }
}

.pulse {
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: svg_pulse 1s ease;
    -webkit-animation-iteration-count: infinite;
}