SVG Gauge

DEMO

CODE

<div class="demo-stage gauge-stage"><svg class="gauge-svg" viewBox="0 0 120 70"><path class="gauge-bg" d="M10 60 A50 50 0 0 1 110 60"/><path class="gauge-fill" d="M10 60 A50 50 0 0 1 110 60"/></svg><div class="gauge-val">0</div></div>

.gauge-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.gauge-svg { width:240px; height:auto; }
.gauge-bg { fill:none; stroke:rgba(255,255,255,.1); stroke-width:10; stroke-linecap:round; }
.gauge-fill { fill:none; stroke:#E91B89; stroke-width:10; stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:157; animation:gauge 2.6s ease-out infinite; }
@keyframes gauge { 0% { stroke-dashoffset:157; } 38%,90% { stroke-dashoffset:47; } 100% { stroke-dashoffset:157; } }
.gauge-val { position:absolute; bottom:2.6rem; font-family:'Oswald',sans-serif; font-size:1.8rem; color:#fff; }

(function(){
  var val = document.querySelector('.gauge-val');
  if(!val) return;
  function run(){
    var start = null, dur = 980;
    function step(t){
      if(!start) start = t;
      var p = Math.min((t - start) / dur, 1);
      val.textContent = Math.round(p * 70);
      if(p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  run();
  setInterval(run, 2600);
})();

AI PROMPT

半円ゲージの弧が伸びて数値がカウントアップするメーターを作って。SVGで半円の<path A弧>を2本（背景＋前景）重ね、前景に stroke-dasharray=弧長(約157) と stroke-dashoffset を設定。@keyframesで dashoffset を 157→47（=70%地点）へ animate。数値は requestAnimationFrame で 0→70 を補間表示し、ゲージのアニメ周期に setInterval で同期。スコア・達成率・ダッシュボードに。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。