JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    Click on circle to animate zoom in. <br/>
    Click on rectangle to reset viewbox.
</div>

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

var radius = 200;

function zoomView(angle1, angle2) {

    var svgEl = paper.canvas;

    var initialCoords = (svgEl
      .getAttribute('viewBox'))
      .split(' ')
      .map(function(x){
        return +(x);
      }
    );

    var finalCoords = (function(angle1, angle2) {

      var theta1 = angle1 * Math.PI / 180;
      var theta2 = angle2 * Math.PI / 180;

      var theta1X = 0 + (radius * Math.cos(theta1));
      var theta1Y = 0 - (radius * Math.sin(theta1));
      var theta2X = 0 + (radius * Math.cos(theta2));
      var theta2Y = 0 - (radius * Math.sin(theta2));

      var minX = Math.round(Math.min(theta1X, theta2X));
      var minY = Math.round(Math.min(theta1Y, theta2Y));
      var widthX = Math.round(Math.abs(theta1X - theta2X));
      var widthY = Math.round(Math.abs(theta1Y - theta2Y));

      return [minX, minY, widthX, widthY];

    })(angle1, angle2);
    
    var rect = paper.rect(finalCoords[0], finalCoords[1], finalCoords[2], finalCoords[3]).attr({
        'fill': '#0066ff',
        'opacity': 0.5
   ...