JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<link rel="stylesheet" href="http://wtf.limpidia.net/minicolor/jquery.minicolors.css">
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="http://wtf.limpidia.net/dragdrop/jquery.event.drag.js"></script>
<script src="http://wtf.limpidia.net/minicolor/jquery.minicolors.min.js"></script>
<div id="mygrad">
	hey
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding:0;
}

body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#mygrad {
    position:absolute;
    top:45%;
    left:45%;
}

JavaScript

(function($){
  var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();

//console.log(prefix);
  
  
	var psize = 96;
	var asize = 8;
	var pradius = parseInt(psize/2,10);
	var aradius = parseInt(asize/2,10);
	
	function legalAngle(a){ if(a < 0) a += 360; return a%360; }
	
	var $g = $("<div/>").css({ position:"relative", margin:"0 auto", display:"inline-block" });
	var $prev = $("<div/>").css({ borderRadius:"50%", overflow:"hidden", background:"white" }).width(psize).height(psize).appendTo($g);
	//$prev.clone(false).appendTo($g).css({position:"absolute",top:0,left:0,zIndex:-1}); // white bg
	$prev.css({zIndex:1});
	
	var barh = parseInt(asize * 2 / 3,10);
	var barw = parseInt(psize * 1.5,10);
	var bary = ((psize-barh)/2);
	var barx = -((barw-psize)/2);
	
	var $bar = $("<div/>").css({ position:"absolute",left:barx,top:bary, background:"purple", borderWidth:"1px",borderStyle:"solid",borderColor:"black" }).width(barw).height(barh).appendTo($g);
	var $angle = $("<div/>").css({ position:"absolute", left:"45%",top:"-50px", borderRadius:"50%", background:"purple", cursor:"move" }).width(asize).height(asize).hide().appendTo($g);
	
	var $delPoint = $("<div/>").css({
		position:"absolute",
		left:0,top:0,
		backgroundImage:"url(data:image/gif;base64,R0lGODlhEAAQAKEBAICAgP///////////yH5BAEKAAIALAAAAAAQABAAAAIylC+gyAfejJp0uYCzDk/W30mbFooAdnIcc6buirToXCbq3bI4rb9qLdsBR5laAmSMNAoAOw==)"
	}).width(16).height(16).hide().on("click",function(e){
		$bar.trigger("del");
		e.stopPropagation();
	});
	
	var $addPoint =...