JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="demo">
    <div class='svg_point'><svg version="1.1" viewBox="0.0 0.0 241.0 234.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l241.0 0l0 234.0l-241.0 0l0 -234.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l241.18898 0l0 234.84251l-241.18898 0z" fill-rule="nonzero"></path><path fill="#29dd7d" d="m8.106299 117.42126l0 0c0 -60.168594 48.776283 -108.94488 108.94488 -108.94488l0 0c28.893982 0 56.604538 11.478088 77.035675 31.909216c20.431122 20.43113 31.90921 48.14169 31.90921 77.03566l0 0c0 60.168602 -48.77629 108.94488 -108.944885 108.94488l0 0c-60.168594 0 -108.94488 -48.776276 -108.94488 -108.94488z" fill-rule="nonzero"></path><path fill="#000000" fill-opacity="0.0" d="m17.980314 32.442257l105.00787 0l0 107.74803l-105.00787 0z" fill-rule="nonzero"></path><path fill="#ffffff" d="m50.59558 97.34128l0 3.375l-18.921877 0q-0.046875 -1.265625 0.4062519 -2.4375q0.71875 -1.9375 2.3125 -3.8125q1.59375 -1.875 4.59375 -4.34375q4.671875 -3.828125 6.3125 -6.0625q1.640625 -2.234375 1.640625 -4.21875q0 -2.09375 -1.5 -3.53125q-1.484375 -1.4375 -3.890625 -1.4375q-2.53125 0 -4.0625 1.53125q-1.515625 1.515625 -1.546875 4.21875l-3.609375 -0.375q0.375 -4.046875 2.796875 -6.15625q2.421875 -2.125 6.5 -2.125q4.125 0 6.515625 2.28125q2.40625 2.28125 2.40625 5.671875q0 1.71875 -0.703125 3.375q-0.703125 1.65625 -2.328125 3.5q-1.625 1.828125 -5.421875 5.03125q-3.15625 2.65625 -4.0625 3.609375q-0.890625 0.9375 -1.484375 1.90625l14.046875 0zm3.7617188 -10.75q0 -5.078125 1.046875 -8.171875q1.046875 -3.09375 3.109375 -4.765625q2.0625 -1.6875 5.1875 -1.6875q2.296875 0 4.03125 0.9375q1.75 0.921875 2.875 2.671875q1.140625 1.734375 1.78125 4.25q0.640625 2.515625 0.640625 6.765625q0 5.046875 -1.03125 8.140625q-1.03125 3.09375 -3.09375 4.78125q-2.0625 1.6875 -5.203125 1.6875q-4.140625...

CSS

body {
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-rendering: optimizelegibility;
}
img{
  display: block;
  position: absolute;
  max-width: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  z-index: 0;
  
}
div.demo {
  z-index: 1;
  position: relative;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 70px;
}
.knob {
  margin: auto;
  position: absolute;
  width: 100%;
}
.svg_point {
  z-index: 5;
  margin: auto;
  position: absolute;
  max-width: 100%;
  top: 10%;
  left: 1%;
  bottom: 0;
  right: 0;
  max-width: 55%;
  background-image: url('dial_ad.svg');
  background-repeat: no-repeat;
}

JavaScript

/*!jQuery Knob*/
/**
 * Downward compatible, touchable dial
 *
 * Version: 1.2.10
 * Requires: jQuery v1.7+
 *
 * Copyright (c) 2012 Anthony Terrien
 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
 *
 * Thanks to vor, eskimoblood, spiffistan, FabrizioC
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

    /**
     * Kontrol library
     */
    "use strict";

    /**
     * Definition of globals and core
     */
    var k = {}, // kontrol
        max = Math.max,
        min = Math.min;

    k.c = {};
    k.c.d = $(document);
    k.c.t = function (e) {
        return e.originalEvent.touches.length - 1;
    };

    /**
     * Kontrol Object
     *
     * Definition of an abstract UI control
     *
     * Each concrete component must call this one.
     * <code>
     * k.o.call(this);
     * </code>
     */
    k.o = function () {
        var s = this;

        this.o = null; // array of options
        this.$ = null; // jQuery wrapped element
        this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
        this.g = null; // deprecated 2D graphics context for 'pre-rendering'
        this.v = null; // value ; mixed array or integer
        this.cv = null; // change value ; not commited value
        this.x = 0; // canvas x position
        this.y = 0; // canvas y position
        this.w = 0; // canvas width
        this.h = 0; // canvas height
        this.$c = null; // jQuery canvas element
        this.c = null; // rendered canvas context
        this.t = 0; // touches index
        this.isInit = false;
        this.fgColor = null; // main color
        this.pColor = null; // previous color
        this.dH = null; // draw hook
        this.cH = null; // change hook
        this.eH = null; // cancel hook
        this.rH...