パーセンテージゲージ(半円メーター)

<div class="d05-04-07-box">
          <svg viewBox="0 0 200 110" class="d05-04-07-svg">
            <path class="d05-04-07-track" d="M15 100 A85 85 0 0 1 185 100"/>
            <path class="d05-04-07-fill" d="M15 100 A85 85 0 0 1 185 100"/>
            <line class="d05-04-07-needle" x1="100" y1="100" x2="100" y2="28"/>
            <circle cx="100" cy="100" r="7" fill="#2a3140"/>
          </svg>
          <span class="d05-04-07-val">0<small>点</small></span>
        </div>
        <p class="d05-04-07-cap">総合パフォーマンススコア</p>

.d05-04-07 .d05-04-07-box{position:relative;width:220px}
        .d05-04-07 .d05-04-07-svg{width:220px;height:120px;overflow:visible}
        .d05-04-07 .d05-04-07-track{fill:none;stroke:#e6ebf3;stroke-width:14;stroke-linecap:round}
        .d05-04-07 .d05-04-07-fill{fill:none;stroke:#f4a72b;stroke-width:14;stroke-linecap:round;
          stroke-dasharray:267;stroke-dashoffset:267;transition:stroke-dashoffset 1.5s ease}
        .d05-04-07 .d05-04-07-needle{stroke:#2a3140;stroke-width:4;stroke-linecap:round;
          transform-origin:100px 100px;transform:rotate(-90deg);transition:transform 1.5s cubic-bezier(.34,1.4,.5,1)}
        .d05-04-07 .d05-04-07-val{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:30px;font-weight:800;color:#2a3140}
        .d05-04-07 .d05-04-07-val small{font-size:14px;font-weight:600;margin-left:2px}
        .d05-04-07 .d05-04-07-cap{margin-top:10px;font-size:13px;color:#5a6273;text-align:center}

(function(){
        var root=document.getElementById('item-05-04-07');if(!root)return;
        var fill=root.querySelector('.d05-04-07-fill'),needle=root.querySelector('.d05-04-07-needle'),val=root.querySelector('.d05-04-07-val');
        var target=82,len=267;
        function run(){
          fill.style.strokeDashoffset=len-(len*target/100);
          needle.style.transform='rotate('+(-90+180*target/100)+'deg)';
          var st=null,dur=1500;
          function step(t){if(!st)st=t;var p=Math.min((t-st)/dur,1);
            val.innerHTML=Math.round(target*(1-Math.pow(1-p,3)))+'<small>点</small>';if(p<1)requestAnimationFrame(step);}
          requestAnimationFrame(step);
        }
        function reset(){fill.style.strokeDashoffset=len;needle.style.transform='rotate(-90deg)';val.innerHTML='0<small>点</small>';}
        var io=new IntersectionObserver(function(es){es.forEach(function(en){
          en.isIntersecting?run():reset();});},{threshold:.4});
        io.observe(root.querySelector('.d05-04-07'));
      })();