JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg width="228" height="120" viewBox="0 0 228 120" fill="none">
  <path d="M6 114C6 54.3532 54.3532 6 114 6C173.647 6 222 54.3532 222 114" stroke="#F5F5F5" stroke-width="12" stroke-linecap="round" id="myPath"/>
  <path d="M6 114C6 54.3532 54.3532 6 114 6C173.647 6 222 54.3532 222 114" stroke="#FFC22E" stroke-width="12" stroke-linecap="round" class="gauge" data-gauge="80"/>
  <circle r="15" cx="50" cy="50" fill="purple" class="circle" />
  <svg class="circle" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="24" height="24" rx="8" fill="url(#pattern0)"/>
<rect width="24" height="24" rx="8" fill="#362B63"/>
<rect width="24" height="24" rx="8" fill="url(#pattern1)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3360_144007" transform="translate(-0.0813461) scale(0.000796748)"/>
</pattern>
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image1_3360_144007" transform="translate(-0.0243326 0.0831578) scale(0.000694444)"/>
</pattern>

</defs>
</svg>
</svg>

CSS

:root {
  --dashoffset: 10;
}
svg {
  /* transform: rotate(180deg) */
}
.gauge {
  stroke-dashoffset: var(--dashoffset);
  stroke-dasharray: 339.33990478515625;
}

JavaScript

const path = document.querySelector('#myPath')
const gaugeChart = document.querySelector('.gauge')
const circle = document.querySelector('.circle')

let totalLength = gaugeChart.getTotalLength();
let numberData = gaugeChart.dataset.gauge;

let number = totalLength - ((totalLength * numberData) / 100);
gaugeChart.style.setProperty("--dashoffset", number);

let progress = numberData / 100;
const point = gaugeChart.getPointAtLength(progress * totalLength);
circle.setAttribute("cx", point.x);
circle.setAttribute("cy", point.y);
console.log(point)