Графика фазы луны в TypeScript неправильно отображает фазы роста и убывания

Я работаю над компонентом React/TypeScript, который отображает фазы луны на основе значения от 0 до 1. Проблема в том, что фазы луны не отображаются правильно между фазами первой четверти и последней четверти. В частности, компонент показывает растущую луну, хотя она должна быть убывающей, и наоборот.

Я попробовал использовать Canvas вместо SVG, но это не решило проблему. Я также попытался изменить расчет видимой части Луны так:

const visiblePortion = Math.cos(normalizedPhase * Math.PI * 2);

Но проблема не исчезла. Вместо того, чтобы правильно отображать луну в диапазоне от 0,25 до 0,75, светлые/темные части луны по-прежнему меняются местами для этих фаз.

Фазы Луны по шкале от 0 до 1

Фаза луны представлена ​​числом от 0 до 1, где:

• 0: Новолуние (освещенность 0%)
• 0,125: Растущий полумесяц (освещенность ~25% справа)
• 0,25: Первая четверть (освещенность 50% справа)
• 0,375: Растущая луна (освещенность ~75% справа)
• 0,5: Полнолуние (100% освещенность)
• 0,625: Убывающая Луна (освещенность ~75% слева)
• 0,75: Последняя четверть (50% освещенности слева)
• 0,875: Убывающий полумесяц (освещенность ~25% слева)
• 1: Новолуние (освещенность 0%)

Я хочу, чтобы луна постепенно увеличивалась между 0 и 0,5, а затем убывала между 0,5 и 1, но для фаз между 0,25 и 0,75 светлые и темные части меняются местами.

Текущий код

Вот код, с которым я работаю:

import React from "react";

interface MoonPhaseProps {
  phase: number;
  moonTexture?: string;
  rotation?: number;
}

const MoonPhase = ({
  phase,
  moonTexture = "/image/moon/moon.svg",
  rotation = 0,
}: MoonPhaseProps) => {
  // Ensure phase is between 0 and 1
  const normalizedPhase = Math.max(0, Math.min(phase, 1));

  console.info(phase, normalizedPhase);

  // Convert phase to radians
  const phaseRadians = normalizedPhase * 2 * Math.PI;

  // Determine if it's a waxing or waning phase
  const isWaxing = normalizedPhase <= 0.5;

  // Calculate the visible portion of the moon
  const visiblePortion = Math.cos(phaseRadians);

  // Adjust the path for waxing and waning phases
  const pathD = isWaxing
    ? `M50,0 A50,50 0 1,1 50,100 A${
        50 * Math.abs(visiblePortion)
      },50 0 1,0 50,0`
    : `M50,0 A50,50 0 1,0 50,100 A${
        50 * Math.abs(visiblePortion)
      },50 0 1,1 50,0`;

  return (
    <svg
      width = "100%"
      viewBox = "0 0 100 100"
      data-phase = {phase}
      style = {{
        transform: `rotate(${rotation}deg)`,
        transition: "transform 0.3s ease-in-out",
      }}
    >
      <defs>
        <pattern
          id = "moonTexturePattern"
          patternUnits = "userSpaceOnUse"
          width = "100"
          height = "100"
        >
          <image href = {moonTexture} x = "0" y = "0" width = "100" height = "100" />
        </pattern>

        <mask id = "moonMask">
          <rect x = "0" y = "0" width = "100" height = "100" fill = "white" />
          <path d = {pathD} fill = "black" />
        </mask>
      </defs>

      {/* Moon texture */}
      <circle cx = "50" cy = "50" r = "49" fill = "url(#moonTexturePattern)" />

      {/* Shading for the dark side of the moon */}
      <circle
        cx = "50"
        cy = "50"
        r = "49"
        fill = "rgba(0,0,0,0.7)"
        mask = "url(#moonMask)"
      />
    </svg>
  );
};

export default React.memo(MoonPhase);

Вот лист (или хотя бы ссылка на него), показывающий фазы Луны и их значения: Moon_phase_explainer

Заранее спасибо.