Draw a circle by percentage of 360 degrees using svg dashoffset/dasharray

Question

I thought I understood how this is working but the percentages don't work. I had to mirror/rotate my circle(s) as I needed it to start from the center top and rotate counter-clockwise. The example here rotates clockwise.

It's close but my thought "draw 25% of a circle" by using 750 dashoffset where initially it's 1000 dasharray/dashoffset doesn't work eg. it's larger than 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>

What am I not seeing?

edit: maybe I will need JavaScript to get actual length

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

This might be the case, using the code above, actual length is ~942 and then using 25% of that flipped is ~707 using that is closer to 25% of drawn circle.