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 id="shape2" 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="image1" xlink:href="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" x="" y="0" width="200" height="150"/>
  </pattern>
  <pattern id="img2" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" width="320" height="240">
    <image id="image2" xlink:href="https://pixabay.com/static/uploads/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" x="0" y="0" width="320" height="240"/>
  </pattern>
</defs>  
</svg>

CSS

svg{
	display:block;
	width:300px;
	margin:auto;
}
polygon{
	fill:none;
  stroke:#000000;
	stroke-miterlimit:10;
}
#shape1{
	fill:url(#img1);
}
#shape2{
	fill:url(#img2);
}

JavaScript

var shapes = [
	{
		pattern:document.getElementById("image1"),
		shape:document.getElementById("shape1"),
		scaleFrom:document.getElementById("image1").getAttribute("width"),
		scaleTo:document.getElementById("image1").getAttribute("width")*1.5,
		interval:undefined
	},
	{
		pattern:document.getElementById("image2"),
		shape:document.getElementById("shape2"),
		scaleFrom:document.getElementById("image2").getAttribute("width"),
		scaleTo:document.getElementById("image2").getAttribute("width")*1.5,
		interval:undefined
	}
];

shapes.forEach(function(item){
	item.shape.addEventListener("mouseover", function(){
		zoomIn(item);
	});
	item.shape.addEventListener("mouseout", function(){
		zoomOut(item);
	});
});

function zoomIn(item){
	if(item.interval){
  	clearInterval(item.interval);
  }
  item.interval = setInterval(function(){
  	var curScale = +item.pattern.getAttribute("width");
  	var curX = +item.pattern.getAttribute("x");
  	var curY = +item.pattern.getAttribute("y");
    var curH = +item.pattern.getAttribute("height");
  	if(curScale < item.scaleTo){
 			item.pattern.setAttribute("width", (curScale += 10));
 			item.pattern.setAttribute("x", (curX -= 5));
 			item.pattern.setAttribute("y", (curY -= 5));
 			item.pattern.setAttribute("height", (curH += 10));
 		}	
    else{
    	clearInterval(item.interval);
    }
  }, 20);
	
}
function zoomOut(item){
	if(item.interval){
  	clearInterval(item.interval);
  }
  item.interval = setInterval(function(){
  	var curScale = +item.pattern.getAttribute("width");
  	var curX = +item.pattern.getAttribute("x");
  	var curY = +item.pattern.getAttribute("y");
    var curH = +item.pattern.getAttribute("height");
  	if(curScale > item.scaleFrom){
 			item.pattern.setAttribute("width", (curScale -= 10));
 			item.pattern.setAttribute("x", (curX += 5));
 			item.pattern.setAttribute("y", (curY += 5));
 			item.pattern.setAttribute("height", (curH -= 10));
 		}	
    else{
    	clearInterval(item.interval);
    }
  }, 20);
}