JSFiddle - React, Tailwind, and code Playground

by Eugene Chefranov

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 926 836" width="926" height="836">
 <defs>
<defs>
 <pattern xmlns="http://www.w3.org/2000/svg" id="img1" patternUnits="userSpaceOnUse" width="1000" height="900">
 <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://5thedgestudio.at.ua/img/5.jpg" x="70" y="-150" width="790" height="790" id="penimage1">
 
 </image>
 </pattern>
 <pattern xmlns="http://www.w3.org/2000/svg" id="img2" patternUnits="userSpaceOnUse" width="1648" height="1100">
 <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://5thedgestudio.at.ua/img/6.jpg" x="0" y="200" width="1000" height="700" id="penimage2">
 
 </image>
 </pattern>
 <pattern xmlns="http://www.w3.org/2000/svg" id="img3" patternUnits="userSpaceOnUse" width="1500" height="1000">
 <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://5thedgestudio.at.ua/img/4.jpg" x="80" y="220" width="900" height="600" id="penimage3">
 
 </image>
 </pattern> 
 </defs>
 </defs>
 <a xlink:href="#"><path fill="url(#img1)" stroke="#777" d="M215.000,23.000 L698.000,22.000 L782.000,227.000 L458.000,369.000 L131.000,226.000 L215.000,23.000 Z" id="top" /></a>
 <a xlink:href="#"><path fill="url(#img2)" stroke="#777" d="M130.000,238.000 L28.000,468.000 L451.000,815.000 L452.000,377.000 L130.000,238.000 Z" id ="left" /></a>
 <a xlink:href="#"><path fill="url(#img3)" stroke="#777" d="M465.000,814.000 L888.000,465.000 L787.000,238.000 L464.000,377.000 L465.000,814.000 Z" id="right"/></a> 
 </svg>

CSS

.pentamenu { margin: 0 auto; width: 630px; padding-top: 17px; }
.pentm { position: absolute; width: 630px; height: 630px; }
#top, #left, #right { cursor: pointer; }
svg { display: block; width: 100%; height: 630px; }

#penimage1, #penimage2, #penimage3 {
	/*-ms-transform: skew(0,30deg);
    -webkit-transform: skew(0,30deg);
    transform: skew(0,30deg);
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;*/
    -webkit-animation: preindex1 18s infinite;
	-moz-animation: preindex1 18s infinite;
	animation: preindex1 18s infinite;
}


@keyframes preindex1 {
	0% {
	-ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
	}
	50% {
	-ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
	}
	100% {
	-ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
	}
}
@-moz-keyframes preindex1 {
	0% {
	-ms-transform: scale(1.0) skew(0,30deg);
    -webkit-transform: scale(1.0) skew(0,30deg);
    transform: scale(1.0) skew(0,30deg);
	}
	50% {
	-ms-transform: scale(1.1) skew(0,30deg);
    -webkit-transform: scale(1.1) skew(0,30deg);
    transform: scale(1.1) skew(0,30deg);
	}
	100% {
	-ms-transform: scale(1.0) skew(0,30deg);
    -webkit-transform: scale(1.0) skew(0,30deg);
    transform: scale(1.0) skew(0,30deg);
	}
}
@-webkit-keyframes preindex1 {
	0% {
	-ms-transform: scale(1.0) skew(0,30deg);
    -webkit-transform: scale(1.0) skew(0,30deg);
    transform: scale(1.0) skew(0,30deg);
	}
	50% {
	-ms-transform: scale(1.1) skew(0,30deg);
    -webkit-transform: scale(1.1) skew(0,30deg);
    transform: scale(1.1) skew(0,30deg);
	}
	100% {
	-ms-transform: scale(1.0) skew(0,30deg);
    -webkit-transform: scale(1.0) skew(0,30deg);
    transform: scale(1.0) skew(0,30deg);
	}
}