JSFiddle - React, Tailwind, and code Playground

by harshadpatson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <svg viewBox="0 0 500 500" class="gauge" version="1.1" xmlns="http://www.w3.org/2000/svg" >
    
    <g id="xcustom3" fill="url(#_GradLFF02X02X02XF002X02X02X0NA_)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10">
    <rect id="centreGuage" data-type="needle_centre" x="66" y="210" rx="20" ry="20" width="197" height="197" stroke="rgb(240,240,240)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(240,240,240)" fill-opacity="1" fill-rule="evenodd"></rect>
    <polygon points="195 365 191 367 194 372 198 370 " stroke="rgb(71,71,71)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(218,48,160)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="144 367 140 366 136 377 140 378 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="115 348 113 344 104 352 106 355 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="102 316 101 312 89 313 90 317 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(255,0,0)" fill-opacity="1" fill-rule="evenodd"></polygon>
    <polygon points="106 282 108 278 97 273 96 277 " stroke="rgb(218,48,160)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"...

JavaScript

var guagec = $("#centreGuage");

var offset = guagec.offset();
var width = guagec.width();
var height = guagec.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
var timers = [];
var interval = setInterval(function () {
var divElem1 = document.querySelector("#needle");

var element = SVG(divElem1);
var max = 100;
var min = 0;
var value = Math.random() * 100;
var maxAngle = 320;
var minAngle = 10;
var total = max - min;
var angleval = maxAngle / 100;
var angle = (((value - min) * 100) / total) * angleval;

element.animate(500).rotate(angle, centerX, centerY);
  document.getElementById("GaugeValue").innerHTML = value.toFixed(2);

 }, 1000);