Нарисуйте круг в процентах на 360 градусов, используя svg dashoffset / dasharray

Question

Я думал, что понял, как это работает, но проценты не работают.Я должен был отразить / повернуть круг (ы), так как мне нужно, чтобы он начинался с центральной вершины и вращался против часовой стрелки.Пример здесь вращается по часовой стрелке.

Это близко, но моя мысль «нарисовать 25% круга» с использованием 750 dashoffset, где изначально это 1000 dasharray / dashoffset, например, не работает.это больше чем 25%

.parent {
  position: relative;
  transform: rotate(90deg) scaleX(-1); /* scale(1.5) */
  border: 1px solid red;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 30;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: rotate 3s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform: translate(-125px, -125px);
}

@keyframes rotate {
  to {
    stroke-dashoffset: 750; /* trying to draw 25% of the circle */
  }
}

<svg class="parent" height="350" width="350">
  <circle cx="300" cy="300" r="150" stroke-linecap="round" />
</svg>

Что я не вижу?

изменить: возможно мне понадобится JavaScript , чтобы получить фактическую длину

var path = document.querySelector('.path');
var length = path.getTotalLength();

Это может иметь место, если использовать приведенный выше код, фактическая длина составляет ~ 942, а затем 25% от перевернутого составляет ~ 707 при использовании ближе к 25% нарисованного круга.