Window.innerWidth is ok if it is greater than a sure dimension, but when it is lower than a sure dimension, the animation will not work correctly.
The start line shifts to the left
react code

        <svg className="moving-circle" type={{ animation:state.TimerInfo.State===false?"":`ani ${state.invasionTimer}s linear` }} width="220" peak="220" viewBox="0 0 168 168">
          <path
            d="M163 84C163 127.63 127.63 163 84 163C40.3695 163 5 127.63 5 84C5 40.3695 40.3695 5 84 5C127.63 5 163 40.3695 163 84Z"
            stroke="inexperienced"
            strokeWidth="12"
          />
          <textual content x="49%" y="-47%" textAnchor="center" dominantBaseline="center" className="Timercount">
            {Math.ceil(state.TimerInfo.Time)}
          </textual content>
        </svg>

`css code’

.moving-circle {
  place: absolute;
  high: 22.5%;
  left: 22.5%;
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  rework: rotate(-90deg);
  fill: rgba(0, 0, 0, 0.555);  
}
@keyframes ani {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 500px;
  }
}

I might respect it if you happen to may inform me what I want to vary.

Regular
enter picture description right here
stranger
enter picture description right here