JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img src="https://lh4.googleusercontent.com/-JDDCAYUROxs/UP6Qwa-kaZI/AAAAAAAAANc/GN1WVpfn19g/w497-h373/meter.jpg"></img>
<div id="container"></div>
<div id="container1"></div>

CSS

#container{
position: absolute; 
z-index: 999;
margin-top: -380px;
margin-left: 28px;
}

#container1{
position: absolute; 
z-index: 1;
margin-top: -380px;
margin-left: 28px;
}

img{
z-index: 0;
}

JavaScript

$(document).ready(function() {

		var r = Raphael("container", 400, 400);

		//Moving needle
		var triangle = r.path("M210 200L190 200L200 40Z").attr({
			fill : "#0f0"
		});
		var line = r.path("M200 200L40 200 Z").attr({
			fill : "#000"
		});

		var circle = r.ellipse(200, 200, 12, 10).attr({
			fill : "#fff",
			stroke : "#000",
			"stroke-width" : "2"
		});


        triangle.rotate(-145,200,200);
        line.rotate(-55,200,200);

		triangle.animate({transform:"r98 200 200"},2000,'<>');
		line.animate({transform:"r188 200 200"},2000,'<>')
		
		//Needle to hide needle in original image
		var r = Raphael("container1", 400, 400);

		var triangle = r.path("M218 195L180 195L200 20Z").attr({
			fill : "#fff",
			stroke : "#fff"
		});
		var line = r.path("M200 200L10 200 20Z").attr({
			fill : "#fff",
			stroke : "#fff"
		});

		var circle = r.ellipse(200, 200, 11, 9).attr({
			fill : "#fff",
			stroke : "#fff",
			"stroke-width" : "2"
		});


        triangle.rotate(458,200,200);
        line.rotate(548,200,200);
        
        setInterval(Function("hide();"), 2000);
		

	});
	
	function hide(){
		$("#container").hide();
		$("#container1").hide();
	}