JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" style="zoom: 100%; ">
<head>
  <meta charset="utf-8">
  <title>HTML5 Demo: File API</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
  <script>
  var scale = 0.7;
  function handleCorner(event) {
    scale = $("#scale-slider").val()/100;
    $("#raphael").css('-webkit-transform','scale('+scale+')');
    $("#raphael").css('-moz-transform','scale('+scale+')');
    $("#raphael").css('-0-transform','scale('+scale+')');      
    $("#raphael").css('transform','scale('+scale+')');
      }
  </script>
</head>
<body>

  <div id="raphael"></div>
  <input id="scale-slider" type="range" min="40" max="120" value="70" onchange="handleCorner(event)">

</body></html>

CSS

#raphael { 
    width: 500px; 
    height: 500px; 
    -webkit-transform: scale(.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
    background: blue;
}
#scale-slider {
  position: relative;
}

JavaScript

var paper = Raphael("raphael", 500, 500);
var c = paper.circle(100, 100, 50).attr({
    fill: "black",
    opacity: 1.0
});
var d = paper.circle(200, 100, 50).attr({
    fill: "red",
    opacity: 1.0
});
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: .5});
}
var moveCorrected = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + (1/scale)*dx, 
      cy: this.oy + (1/scale)*dy
    });
}
var move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + dx, 
      cy: this.oy + dy
    });
}
var up = function () {
    // restoring state
    this.attr({opacity: 1.0});
};
c.drag(moveCorrected, start, up);
d.drag(move, start, up);