JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	viewBox="0 0 231 154.3" xml:space="preserve">
	<polygon id="shape1" points="155.2,147.8 155.2,100.5 96.5,100.5 93.8,5.2 0.5,10.5 
		3.2,144.5 "/>
	<polygon points="167.2,97.2 102.5,97.2 102.5,5.2 225.2,0.5 230.5,153.8 
		167.2,153.8 167.2,100.5 "/>
  <defs>
  <pattern id="img1" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" width="200" height="150">
    <image id="image" xlink:href="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" x="" y="0" width="200" height="150"/>
  </pattern>
</defs>  
</svg>

CSS

polygon{
  fill:none;
  stroke:#000000;
  stroke-miterlimit:10;
  transfrom-origin:center center;
}
polygon:first-child{
  fill:url(#img1);
  transfrom-origin:center center;
}
pattern{
  transfrom-origin:center center;
}
pattern:hover{
  transfrom:scale(2);
}

JavaScript

var pattern1 = document.getElementById("image");
var scaleFrom = pattern1.getAttribute("width");
var scaleTo = pattern1.getAttribute("width")*2;
var interval;
document.getElementById("shape1").onmouseover = function(){
	if(interval){
  	clearInterval(interval);
  }
  interval = setInterval(function(){
  	var curScale = +pattern1.getAttribute("width");
  	var curX = +pattern1.getAttribute("x");
  	var curY = +pattern1.getAttribute("y");
    var curH = +pattern1.getAttribute("height");
  	if(curScale < scaleTo){
 			pattern1.setAttribute("width", (curScale += 10));
 			pattern1.setAttribute("x", (curX -= 5));
 			pattern1.setAttribute("y", (curY -= 5));
 			pattern1.setAttribute("height", (curH += 10));
 		}	
    else{
    	clearInterval(interval);
    }
  }, 20);
	
}
document.getElementById("shape1").onmouseout = function(){
	if(interval){
  	clearInterval(interval);
  }
  interval = setInterval(function(){
  	var curScale = +pattern1.getAttribute("width");
  	var curX = +pattern1.getAttribute("x");
  	var curY = +pattern1.getAttribute("y");
    var curH = +pattern1.getAttribute("height");
  	if(curScale > scaleFrom){
 			pattern1.setAttribute("width", (curScale -= 10));
 			pattern1.setAttribute("x", (curX += 5));
 			pattern1.setAttribute("y", (curY += 5));
 			pattern1.setAttribute("height", (curH -= 10));
 		}	
    else{
    	clearInterval(interval);
    }
  }, 20);

}