折れ線グラフ描画

<svg viewBox="0 0 300 170" class="d05-04-08-svg">
          <line x1="20" y1="140" x2="285" y2="140" class="d05-04-08-axis"/>
          <line x1="20" y1="20" x2="20" y2="140" class="d05-04-08-axis"/>
          <polyline class="d05-04-08-line" points="20,120 66,95 112,105 158,60 204,72 250,35 285,42"/>
          <g class="d05-04-08-dots">
            <circle cx="20" cy="120" r="4"/><circle cx="66" cy="95" r="4"/><circle cx="112" cy="105" r="4"/>
            <circle cx="158" cy="60" r="4"/><circle cx="204" cy="72" r="4"/><circle cx="250" cy="35" r="4"/><circle cx="285" cy="42" r="4"/>
          </g>
        </svg>
        <p class="d05-04-08-cap">四半期ごとの成長推移</p>

.d05-04-08 .d05-04-08-svg{width:100%;max-width:320px;height:auto}
        .d05-04-08 .d05-04-08-axis{stroke:#d5dbe6;stroke-width:1.5}
        .d05-04-08 .d05-04-08-line{fill:none;stroke:#2b5cff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
          stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s ease}
        .d05-04-08.is-in .d05-04-08-line{stroke-dashoffset:0}
        .d05-04-08 .d05-04-08-dots circle{fill:#2b5cff;opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;
          transition:opacity .3s ease,transform .3s ease}
        .d05-04-08.is-in .d05-04-08-dots circle{opacity:1;transform:scale(1)}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(2){transition-delay:.5s}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(3){transition-delay:.7s}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(4){transition-delay:.95s}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(5){transition-delay:1.15s}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(6){transition-delay:1.4s}
        .d05-04-08.is-in .d05-04-08-dots circle:nth-child(7){transition-delay:1.6s}
        .d05-04-08 .d05-04-08-cap{margin-top:8px;font-size:13px;color:#5a6273;text-align:center}