JSFiddle - React, Tailwind, and code Playground

by Aleksandr Pavlovsky

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="draw"></div>

JavaScript

Raphael.st.draggable = function() {
	var me = this,
		lx = 0,
		ly = 0,
		ox = 0,
		oy = 0,
		moveFnc = function(dx, dy) {
		  lx = dx + ox;
		  ly = dy + oy;
		  me.transform('t' + lx + ',' + ly);
		},
		startFnc = function() {},
		endFnc = function() {
		  ox = lx;
		  oy = ly;
		};
  
	me
		.attr('cursor', 'move')
		.drag(moveFnc, startFnc, endFnc);
};


$(function(){

	var paper = Raphael('draw', 600, 600),
  		catSet = paper.set();
  
	catSet
		.push(paper.path("m69.598007,392.080017c1.085999,-14.994995 4.411011,-9.707031 6.544983,-17.026001c15.416016,-52.88501 -25.237,-100.822021 -4.346985,-151.776001c-9.787003,0.555969 -24.16301,-23.432983 -23.068008,-43.833008c1.096985,-20.446991 13.373993,-40.070984 24.039993,-65.162994c-45.321999,-109.63501 -22.305008,-67.993988 41.938019,-42.265991c67.174988,-45.722015 80.600952,-6.480011 92.202972,-14.40802c57.314987,-38.154999 43.955994,-57.608002 52.587997,31.328003c95.209015,77.821991 168.78302,157.10202 111.286011,273.677032c62.024017,5.997986 74.03595,-82.088013 56.391968,-155.812012c-12.394958,-35.309021 22.537018,-50.17099 25.552032,61.151001c-11.772003,90.749023 -35.586975,129.896973 -95.696014,136.859985c4.471008,3.617004 -84.898987,25.504028 -141.927994,12.819031c-4.311981,-0.959045 -12.492981,-10.453003 6.860016,-20.520996c7.192993,-3.742004 -15.424011,-11.28302 -25.899994,-9.485046c-12.377014,2.125 -13.226013,30.888 -14.891022,31.532043c-10.858978,4.203003 -18.873993,4.947998 -37.723999,0.502991c-3.635986,-0.856995 -3.754974,-11.048035 3.817017,-18.825012c6.520996,-6.697998 -11.511017,-19.202026 -14.688995,-22.528992c-6.355988,-6.653992 -17.797974,-10.775024 -21.122986,-8.841003c-8.925995,5.190002 7.856995,35.039978 -41.28598,23.325012").attr({stroke: '#000000','stroke-width': '0','stroke-opacity': '1','fill': '#000000'}))
		.push(paper.path("m171.171982,120.373047c14.716003,-1.785004 16.588989,-10.28299 -1.192993,-6.34201c-15.330017,-2.709991 -15.615021,7.016998 1.192993,6.34201z").attr({fill:...