JSFiddle - React, Tailwind, and code Playground

by DOK_UA

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Change color</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>	   
	
</head>
<body>


	<div id = "background">
<svg height="300" width="300">
<defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:gray;stop-opacity:1" />
      <stop offset="50%" style="stop-color:black;stop-opacity:1" />
      <stop offset="100%" style="stop-color:gray;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle id="rotateable" cx="150" cy="150" r="150" stroke="black" stroke-width="1" fill="url(#grad2)" />
  <circle id="rotate" cx="150" cy="150" r="140" stroke="black" stroke-width="1" fill="blue" />
  <circle id="joy" cx="150" cy="150" r="50" stroke="black" stroke-width="3" fill="green" /> 
</svg> 




</body>
</html>

CSS

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#333333;
  }

JavaScript

var degree;
var H = 120;
var S = 50;
var V = 50;
var ratio = 0.2;




$('#joy').draggable({ 
  drag: function(event, ui) {
    var position = ui.position;
        var $circle = $(this);
        var radius = $circle.prop('r').baseVal.value;

        $circle.prop('cx').baseVal.value = position.left + radius;
        $circle.prop('cy').baseVal.value = position.top + radius;
        

        $("body").mouseup(function(){
          $("#joy").css("stroke-width", 3);
           $circle.prop('cx').baseVal.value = 150;
        $circle.prop('cy').baseVal.value = 150;
          });
        $("body").mousedown(function(){
          $("#joy").css("stroke-width", 0);
          });	
        //alert($circle);
    
 $('#joy').css({
    	//'background' : color
    });
}
});