SVG path curve animated in the opposite direction

Question

I created svg in adobe illustrator and used the code generated by this. I am trying to animate a svg drawing. My svg element:

<svg width="100px" height="100px">
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>

The first curve is animated clockwise, I want the same for the 2nd curve, which is animated in the counterclockwise direction. You can see a demo at the end of the question.

Please explain how I can animate the second path clockwise. Also, please explain if you can use the curve data for both paths. Thanks

svg {
  width: 300px;
}
svg path {
  fill-opacity: 0;
  stroke: #50514F;
  stroke-width: 5;
  stroke-dasharray: 870;
  stroke-dashoffset: 870;
  animation: draw 10s infinite linear;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="100px" height="100px">
  <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
  <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>

Run codeHide result

Answer 1

, . , ? , . , , , :

<path fill="none" d="M5,60 A50,50 0 0,1 55,10" />
<path fill="none" d="M55,10 A50,50 0 0,1 105,60"/>

M - . A ( , ). 0 , . , . , (0) ( 1) . , ( 0) ( 0) ( , ). - , 55,10 105,60 .