Выполнить плавную анимацию svg

.spinner {
    fill: none;
    stroke: rgb(255 43 43);
    stroke-width: .7;
    stroke-linecap: round;
    stroke-dashoffset: 100.5;
    stroke-dasharray: 100.5;
    animation: spinner 1.5s ease-in-out infinite;
}

    @keyframes spinner {
  0% {stroke-dasharray: 0, 100; stroke-dashoffset: 0}
  50% {stroke-dasharray: 65, 35; stroke-dashoffset: -35}
  100% {stroke-dasharray: 65, 100; stroke-dashoffset: -100.5}
}
    

<svg viewBox="0 0 10 10" style="height: 200px">
<circle class="spinner" cx="5" cy="5" r="2.3"><animateTransform attributeName="transform" type="rotate" dur="5s" values="0 5 5;360 5 5" repeatCount="indefinite"></animateTransform></circle></svg>