アニメーション折れ線グラフ

<div class="d05-07-01 io-reveal">
          <svg viewBox="0 0 280 150" class="d05-07-01-svg">
            <line x1="20" y1="120" x2="260" y2="120" class="d05-07-01-axis"/>
            <text x="20" y="134" class="d05-07-01-label">1月</text>
            <text x="75" y="134" class="d05-07-01-label">2月</text>
            <text x="130" y="134" class="d05-07-01-label">3月</text>
            <text x="185" y="134" class="d05-07-01-label">4月</text>
            <text x="240" y="134" class="d05-07-01-label">5月</text>
            <path class="d05-07-01-line d05-07-01-line1" d="M20,100 L75,80 L130,90 L185,50 L240,30"/>
            <path class="d05-07-01-line d05-07-01-line2" d="M20,110 L75,95 L130,70 L185,75 L240,45"/>
            <g class="d05-07-01-dots1">
              <circle cx="20" cy="100" r="3"/><circle cx="75" cy="80" r="3"/><circle cx="130" cy="90" r="3"/><circle cx="185" cy="50" r="3"/><circle cx="240" cy="30" r="3"/>
            </g>
            <g class="d05-07-01-dots2">
              <circle cx="20" cy="110" r="3"/><circle cx="75" cy="95" r="3"/><circle cx="130" cy="70" r="3"/><circle cx="185" cy="75" r="3"/><circle cx="240" cy="45" r="3"/>
            </g>
          </svg>
          <div class="d05-07-01-legend"><span class="d05-07-01-dot" style="background:#3b82f6"></span>売上<span class="d05-07-01-dot" style="background:#f59e0b"></span>来訪者</div>
        </div>

.d05-07-01{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
        .d05-07-01-svg{width:100%;max-width:280px;overflow:visible}
        .d05-07-01-axis{stroke:#e5e7eb;stroke-width:1}
        .d05-07-01-label{font-size:8px;fill:#9ca3af;text-anchor:middle}
        .d05-07-01-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400}
        .d05-07-01-line1{stroke:#3b82f6}
        .d05-07-01-line2{stroke:#f59e0b}
        .d05-07-01.is-in .d05-07-01-line1{animation:d05-07-01-draw 1.4s ease forwards}
        .d05-07-01.is-in .d05-07-01-line2{animation:d05-07-01-draw 1.4s ease forwards .35s}
        .d05-07-01-dots1 circle,.d05-07-01-dots2 circle{fill:#fff;stroke-width:2;opacity:0}
        .d05-07-01-dots1 circle{stroke:#3b82f6}
        .d05-07-01-dots2 circle{stroke:#f59e0b}
        .d05-07-01.is-in .d05-07-01-dots1 circle{animation:d05-07-01-pop .3s ease forwards}
        .d05-07-01.is-in .d05-07-01-dots2 circle{animation:d05-07-01-pop .3s ease forwards}
        .d05-07-01.is-in .d05-07-01-dots1 circle:nth-child(1){animation-delay:.1s}
        .d05-07-01.is-in .d05-07-01-dots1 circle:nth-child(2){animation-delay:.4s}
        .d05-07-01.is-in .d05-07-01-dots1 circle:nth-child(3){animation-delay:.7s}
        .d05-07-01.is-in .d05-07-01-dots1 circle:nth-child(4){animation-delay:1.0s}
        .d05-07-01.is-in .d05-07-01-dots1 circle:nth-child(5){animation-delay:1.3s}
        .d05-07-01.is-in .d05-07-01-dots2 circle:nth-child(1){animation-delay:.45s}
        .d05-07-01.is-in .d05-07-01-dots2 circle:nth-child(2){animation-delay:.75s}
        .d05-07-01.is-in .d05-07-01-dots2 circle:nth-child(3){animation-delay:1.05s}
        .d05-07-01.is-in .d05-07-01-dots2 circle:nth-child(4){animation-delay:1.35s}
        .d05-07-01.is-in .d05-07-01-dots2 circle:nth-child(5){animation-delay:1.65s}
        @keyframes d05-07-01-draw{to{stroke-dashoffset:0}}
        @keyframes d05-07-01-pop{to{opacity:1}}
        .d05-07-01-legend{display:flex;gap:14px;font-size:11px;color:#374151;align-items:center}
        .d05-07-01-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}