JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<div id="slider"></div>
<svg width="469.89" height="352.41" xmlns="http://www.w3.org/2000/svg" xmlns>
	<defs>
		<clipPath id="a">
			<polygon points="
			351.95 334.48 245.14 276.38 136.71 331.43 158.97 211.88 73.11 125.78 193.68 110 249.04 1.73 301.3 111.53 421.37 130.72 333.1 214.35 351.95 334.48
			" style="fill:none"/>
		</clipPath>
	</defs>
	<title>image mask</title><g style="clip-path:url(#a)">
		<image width="469.89" height="352.41" xlink:href="https://goo.gl/UG726c" class="cat"/>
	</g>
</svg>

JavaScript

$(function() {
   obj = Snap(".cat");
   //obj.drag();
   var dimens = obj.node.getBoundingClientRect();     
   console.log(dimens.width)
   $( "#slider" ).slider({
      max: 100, 
      min: 100/5, 
      step:1, 
      value:dimens.width,
      slide: function( event, ui ) {
         w = ui.value * dimens.width / 100;
         h = ui.value * dimens.height / 100;
         obj.attr({
            width: w,
            height: h,
            x: (dimens.width - w)/2,
            y: (dimens.height - h)/2
         });
      }
   });
});