CSS SVG动画偏移/数组问题

Question

我已经创建了动画，还需要3件事才能使其正常工作。

1. 我需要填充物以顺时针方向而不是顺时针方向
2. 我需要它从圆上的特定点开始
3. 在某些情况下，我会希望这样做，以便它仅填充圆的一部​​分，而不填充整个圆。

此处的代码：https://codepen.io/laura-conde/pen/qzEZLL

<svg viewBox="0 0 705.88 705.88" >
 <circle class="white_circle_land" cx="352.94" cy="352.94" r="272.94"  />
  <circle class="_magenta50To100Image" cx="352.94" cy="352.94" r="272.94"  />
</svg>


<style>
._magenta50To100Image {
  fill: none;
  stroke: #E92D87;
  stroke-width: 135;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: magenta 2s linear;
  animation-fill-mode: forwards;
}

.white_circle_land {
  fill: none;
  stroke: #000000;
  stroke-width: 149;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: magenta 2s linear;
  animation-fill-mode: forwards;
}

@keyframes magenta {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
</style>