JSFiddle - React, Tailwind, and code Playground

by DOK_UA

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link id="hostStyle" rel="stylesheet" href="css/styles.css"/>
<link id="hostStyle" rel="stylesheet" href="css/jquery-ui.css"/>

<title></title>
</head>

<body>
    <div id="text">123</div>

    <div id="svg"></div>

		
		
</body>
    
    <script src="js/libs/CSInterface.js"></script>
    <script src="js/libs/jquery-1.9.1.js"></script>
    <script src="js/libs/jquery-ui.js"></script>
    <script src="js/libs/chroma.js"></script>
    <script src="js/libs/color2color.js"></script>
    <script src="js/main.js"></script>
       
</body>
</html>

CSS

svg {
  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;


}

JavaScript

var svgSize = 300;
var sizeCorectorX;
var sizeCorectorY;
var degree;
var hsvChange;

var h = 130;
var s = 50;
var l = 50;

var baseColor;

$(window).resize(function() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  sizeCorectorX = svgSize/windowWidth; 
  sizeCorectorY = svgSize/windowHeight;
  });
  

var svgCenter = svgSize/2;
var joyDiam = 50;
var rotateColorRadius = (svgSize*0.8)/2;
var rotateColorGradRadius = (svgSize*0.85)/2;

var svgText = "";
var joyColor = 'red';
var rotateColor = 'blue';
var rotateColorGrad = 'green';

var windowWidth = $(window).width();
var windowHeight = $(window).height();  

var svgHead = '<svg width="'+svgSize+'" height="'+svgSize+'version="1.1" viewBox="0 0 300 300">';
var gradient = '  <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:black" /> <stop offset="50%" style="stop-color:gray" /><stop offset="100%" style="stop-color:black" /> </linearGradient> </defs>';
var joy = '<circle id = "joy" cx="'+svgCenter+'" cy="'+svgCenter+'" r="'+joyDiam+'"stroke="black" stroke-width="0"/>';
var rotate = '<circle id = "rotate" cx="'+svgCenter+'" cy="'+svgCenter+'" r="'+rotateColorRadius+'"/>';
var rotateGrad = '<circle id = "rotateGrad" cx="'+svgCenter+'" cy="'+svgCenter+'" r="'+rotateColorGradRadius+'"/>';
var svgEnd = '</svg>';

var svgArray = [svgHead,gradient,rotateGrad,rotate,joy,svgEnd];

for (var i=0; i<svgArray.length; i++)
{
svgText += svgArray[i];
}
jQuery('#svg').html(svgText);

//alert(svgText)

$("#joy").css({ fill:joyColor});
$("#rotate").css({ fill:rotateColor}); 
$("#rotateGrad").css("fill", "url(#grad1)");
$("#joy").css("stroke-width", 2);




$( "#joy" )
  .mouseup(function() {
  	$('#joy').off('mousemove'); // удаляет функцию маус муф после того как отпускаем мышь
    $("#joy").css({ cx:svgCenter});
    $("#joy").css({ cy:svgCenter});
    $("#joy").css("stroke-width", 2);
    $( "#text" ).text(hsvChange)
    $("#rotate").css({...