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: matrix(1,0,0,1,0,0);
        stroke-width: 1;
		opacity: 1;
	 }

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

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