JSFiddle - React, Tailwind, and code Playground

HTML

<div class='spinner'>
  <div class='dot'></div>
  <div class='dot'></div>
  <div class='dot'></div>
</div>
<div><svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
<g>
	<g>
		<g>
			
				<path fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M292.9,399.9l0.2,0.2l-0.4,0C292.8,400,292.8,399.9,292.9,399.9z"/>
			
				<path fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M322.1,387.4c0,0,6.1-54,6.1-55.2c0-2.5-4.7-4.6-13.1-9.1c-5.8-3.1-11.1-5.8-13.8-5.8c-3.3,0-31.8,5.9-34.3,6.5
				c-2.5,0.6-3.5,1.7-3.5,2.5c0,0.7,3,53.3,3,53.3c0.2,0.8,0.9,1.7,1.5,1.4c2.8-0.3,9.4-2,9.4-2l-1.5-22.1l3.9,41.9
				c0,0,3.4,2.2,6,2.2c2.6,0,6.2-0.4,7.3-1.5s4.4-24.4,4.4-24.4s5.6-1.6,6.9-2.1c0.6-3.5,2.2-15.5,2.2-15.5l3.2-1l3.6,30
				c0,0,2.9,2.1,4.4,3.7C319.9,390.4,322.1,387.4,322.1,387.4z"/>
			
				<path fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M310.5,338.4c-8.6,2-14.2,3.8-23.2,3.8c-7.1,0-11.4-4.5-16.3-8c-12.6-9-5.6-9.8-3.7-10.3c1.9-0.5,19.4-4.1,28.7-5.7
				c2.6-0.4,5.3-1.6,9.9,0.5c2.1,1,5.1,2.4,9.4,4.4c9.2,4.4,12.9,6.6,12.9,9.1C328.3,334.1,319.1,336.4,310.5,338.4z"/>
			
				<path fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M306.7,357.7c-0.1,0.7-1.6,12.1-2.2,15.5c-1.4,0.5-6.8,2.2-6.8,2.2l2.1-15.6L306.7,357.7z"/>
			
				<polyline fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
				267.5,381 268.4,349.7 275.7,356.7 			"/>
			
				<path fill="none" stroke="#FFFFFF" stroke-width="1.7755" stroke-linecap="round"...

CSS

:root {
    --spinner-size: 5rem;
    --dot-size: calc(var(--spinner-size) / 5);
    --duration: 3s;
    --delay: calc(var(--duration) / 60);
}

body {
    background: #f55;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);
    }
    20% {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);
    }
    25% {
        -webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    45% {
        -webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    50% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    70% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    75% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
    }
    95% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: translateX(0) translateY(0);
     ...