JSFiddle - React, Tailwind, and code Playground

by dievri

HTML

<!DOCTYPE html>
<html lang="en">
<head> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet"> </head>
  <body>
    <svg viewBox="-2.5 -2.5 55 55" class="icon">
      <circle id="circle" cx="25" cy="25" r="25"></circle>
    </svg>
    <div id="number">952</div>
  </body>

</html>

CSS

body {
  margin-top: 70px;
  margin-left: 100px;
}
#circle {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke: rgb(188, 1, 67); 
  
  /* 800 = 0% 640 = 100% */
  stroke-dashoffset: 684.8px;
}
.icon {
  width: 100px;
  height: 100px;
  z-index: 0;
  position: absolute;
  transform: rotate(-90deg) scale(1.1);
}

#number {
  width: 100px;
  height: 100px;
  display: flex;
  position: absolute;
  font-size: 35px;
  align-items: center;
  font-family: Rubik, sans-serif;
  border-radius: 50%;
  justify-content: center;
  color: #bc0143;
  background: rgba(188, 1, 67, 0.3) none repeat scroll 0% 0%;
}

JavaScript

let rank_colors = [
"#8d8d8d",	// Новичок
"#4f9a97", 	// Любитель
"#187818",  // Таксист
"#8c8100", 	// Профи
"#ba5800",  // Гонщик
"#bc0143",  // Маньяк
"#5e0b9e",  // Супермен
"#2e32ce",  // Кибергонщик
"#061956",	// Экстракибер
"#000000"		// Тахион
]
let number = document.getElementById("number")
let speed = parseFloat(number.innerHTML);
let rank = Math.trunc(speed/100);
let rank_color = rank_colors[rank];
let circle = document.getElementById("circle");
circle.style["stroke-dashoffset"] = 640 + ((100 - speed%100) * 1.6)
circle.style.stroke = rank_color
number.style.color = rank_color
number.style.background = rank_color + "4D" + " none repeat scroll 0% 0%"