SVGパス描画スクラブ

<div class="view08-16-07">
          <svg class="svg08-16-07" viewBox="0 0 200 140" width="180" height="126">
            <defs>
              <linearGradient id="svgGrad08-16-07" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#38bdf8"/>
                <stop offset="1" stop-color="#f472b6"/>
              </linearGradient>
            </defs>
            <path class="path08-16-07" d="M20,110 C50,20 90,20 100,70 C110,120 150,120 180,40" fill="none" stroke="url(#svgGrad08-16-07)" stroke-width="6" stroke-linecap="round"/>
          </svg>
          <div class="scr08-16-07">
            <div class="sp08-16-07">
              <span class="hint08-16-07">↓ 枠内をスクロール<br>スクロール量がSVGパスの描画進捗になります</span>
            </div>
          </div>
        </div>

.d08-16-07{background:#0b1220;align-items:stretch;}
        .d08-16-07 .view08-16-07{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 50% 40%,#111c33,#0b1220 75%);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-16-07 .path08-16-07{will-change:stroke-dashoffset;}
        .d08-16-07 .scr08-16-07{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-07 .sp08-16-07{height:900px;padding:16px 18px 0;}
        .d08-16-07 .hint08-16-07{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0e7ff;background:rgba(11,18,32,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-07 .scr08-16-07');
        if(!scr)return;
        var path=document.querySelector('.d08-16-07 .path08-16-07');
        var len=path.getTotalLength();
        path.style.strokeDasharray=len;
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          path.style.strokeDashoffset=len*(1-p);
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();