анимационный круг для перемещения по линии css

Question

Я пытаюсь анимировать точку для перемещения по линии, и когда она достигает конца линии, она исчезает и появляется знак 360. до сих пор мне удалось добиться идеального отображения линии и «360», но точка не отображается.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

.delay {
  opacity: 0;
  animation: hideshow 3s ease-in-out 1 forwards;
  animation-delay: 4s;
}

.marker {
  motion-path: path('M236.52,53.48A130.73,130.73,0,1,1,209,26.21');
  offset-path: path('M236.52,53.48A130.73,130.73,0,1,1,209,26.21');
  animation: move 5s linear forwards;
}

@keyframes move {
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hideshow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 263.55 263.55">
    					<defs><style>.cls-1{fill:none;stroke:#5c5c5c;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill:#00aeef;}</style></defs><title>360</title>
    					<g id="Layer_2" data-name="Layer 2">
    						<g id="Layer_1-2" data-name="Layer 1">
    							<!--line-->
    							<path class="cls-1 path" d="M236.52,53.48A130.73,130.73,0,1,1,209,26.21"/>
    							<!--360-->
    							<path class="cls-2 delay" d="M195.42,40.65V37.14h3.28c2.31,0,4.75-.62,4.78-2.73,0-1.3-1-3-4.68-3-2,0-4.74.72-4.74,2.8h-4.29c0-4.91,4.87-6.7,9.06-6.7s8.9,2.08,8.94,6.92a4.8,4.8,0,0,1-3.15,4.49,5.4,5.4,0,0,1,3.7,4.77c0,5.56-5.23,7.21-9.62,7.21s-9.26-1.82-9.29-7h4.32c0,2.34,3.15,3.15,5,3.15,2.17,0,5.06-.91,5.06-3.35,0-1.36-.74-3.05-4.84-3.05Z"/>
    							<path class="cls-2 delay" d="M215.5,34.8v3.41c1-1.56,3.47-2.4,5.26-2.4,4.58,0,9.39,1.92,9.39,7.57,0,5-4.84,7.54-9.42,7.54s-9.49-2.51-9.49-7.61V34.84c0-5.07,4.68-7.44,9.36-7.44,4.93,0,9.32,2,9.32,6.72h-4.29c0-2-2.53-3-5-3s-5.16,1.36-5.16,3.83Zm10.39,8.58c0-2.5-2.27-3.83-5.13-3.83s-5.3,1.3-5.26,3.83,2.43,3.7,5.23,3.7S225.89,45.88,225.89,43.38Z"/>
    							<path class="cls-2 delay" d="M232.78,37.53c0-13.58,19.94-13.55,19.94,0v3.28c0,13.55-19.94,13.58-19.94,0ZM237,40.81c0,8.25,11.44,8.25,11.44,0V37.53a5.73,5.73,0,1,0-11.44,0Z"/>
    							<path class="cls-2 delay" d="M260.68,23.37a5.25,5.25,0,1,1-10.49,0,5,5,0,0,1,5.21-5.26A5.1,5.1,0,0,1,260.68,23.37Zm-8,0a2.75,2.75,0,1,0,5.48,0,2.84,2.84,0,0,0-2.74-3A2.77,2.77,0,0,0,252.68,23.37Z"/>
    							<!--circle-->
    							<path class="cls-2 marker" d="M242.28,53.84A5.25,5.25,0,1,1,237,48.58,5.1,5.1,0,0,1,242.28,53.84Zm-8,0a2.75,2.75,0,1,0,5.48,0,2.84,2.84,0,0,0-2.74-3A2.77,2.77,0,0,0,234.28,53.84Z"/>
    						</g>
    					</g>
    				</svg>