.css

.svg {
  width: 400px;
  height: 800px;
}

.svg-path {
  stroke-dasharray: var(--totalLength);
  stroke-dashoffset: var(--totalLength);
}

.html

<svg viewBox="-20 -20 440 840" class="svg" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="pathGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FFD54F" />
      <stop offset="100%" stop-color="#FF6D00" />
    </linearGradient>
  </defs>
  <path
    class="svg-path"
    d="M 350,0 C 350,250 50,250 50,400 C 50,550 350,550 350,800"
    fill="none"
    stroke="url(#pathGradient)"
    stroke-width="40"
    stroke-linecap="round"
  />
</svg>

.js

/**
 * SVGパスの描画アニメーション
 * getTotalLength() でパス全長を取得し、requestAnimationFrame で stroke-dashoffset を更新する
 */
document.addEventListener("DOMContentLoaded", () => {
  const path = document.querySelector(".svg-path");
  const totalLength = path.getTotalLength();
  const duration = 2000;
  let start = null;

  path.style.setProperty("--totalLength", totalLength);

  const animate = (timestamp) => {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - (1 - progress) ** 3;

    path.style.strokeDashoffset = totalLength * (1 - eased);

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
});