JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}
@font-face {
  font-family: 'digital7';
  font-style: normal;
  font-weight: 400;
  src: url('http://fendyicha.com/a/digital-7.ttf');
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();
stage.add(layer);

var digitalGauge = new Kinetic.Group({
    x: 0,
    y: 0,
    width: 210,
    height: 80,
    draggable: true
});
layer.add(digitalGauge);

var boxBG = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 210,
    height: 80,
    fillLinearGradientStartPoint: [107, 0],
    fillLinearGradientEndPoint: [107, 70],
    fillLinearGradientColorStops: [0, '#3B4354', 1, "#0B1B29"],
    stroke: "rgba(50,50,50,1)",
    strokeWidth: 1
});
digitalGauge.add(boxBG);

var boxBG2 = new Kinetic.Rect({
    x: 15,
    y: 15,
    width: 200,
    height: 70,
    fillLinearGradientStartPoint: [107, 0],
    fillLinearGradientEndPoint: [107, 70],
    fillLinearGradientColorStops: [0, '#4B565E', 1, "#37434A"],
    stroke: "rgba(50,50,50,1)",
    strokeWidth: 1
});
digitalGauge.add(boxBG2);

// 50, 115, 180

var red = new Kinetic.Circle({
    x: 50,
    y: 50,
    radius: 28,
    fillLinearGradientStartPoint: [170, -15],
    fillLinearGradientEndPoint: [170, 20],
    fillLinearGradientColorStops: [0, '#f85032', 0.5, '#f16f5c', 0.51, '#f6290c', 1, "#e73827"],
    stroke: '#353A42',
    strokeWidth: 3
});
digitalGauge.add(red);

var grey = new Kinetic.Circle({
    x: 115,
    y: 50,
    radius: 28,
    fillLinearGradientStartPoint: [170, -15],
    fillLinearGradientEndPoint: [170, 20],
    fillLinearGradientColorStops: [0, '#818284', 0.5, '#525458', 0.51, '#353A42', 1, "#383A3E"],
    stroke: '#353A42',
    strokeWidth: 3
});
digitalGauge.add(grey);

var grey2 = new Kinetic.Circle({
    x: 180,
    y: 50,
    radius: 28,
    fillLinearGradientStartPoint: [170, -15],
    fillLinearGradientEndPoint: [170, 20],
    fillLinearGradientColorStops: [0, '#818284', 0.5, '#525458', 0.51, '#353A42', 1, "#383A3E"],
    stroke: '#353A42',
    strokeWidth: 3
});
digitalGauge.add(grey2);

var yellow = new Kinetic.Circle({
    x: -100,
    y: 50,
    radius:...