JSFiddle - React, Tailwind, and code Playground

by Eugene Chefranov

HTML

<div class="pentamenu">
<div class="pentm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 577.8 528.3">
    <defs>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img1" patternUnits="userSpaceOnUse" width="600" height="600">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/2.jpg" x="0" y="0" width="600" height="600" >
			<animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1"
    keyTimes="0; 0.5; 1" />
			</image>
        </pattern>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img2" patternUnits="userSpaceOnUse" width="600" height="600">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/1.jpg" x="0" y="0" width="600" height="600">
        <animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1"
    keyTimes="0; 0.5; 1"/>
			</image>
		</pattern>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img3" patternUnits="userSpaceOnUse" width="600" height="600">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/3.jpg" x="0" y="0" width="600" height="600">
        <animatetransform attributeName="transform" type="scale" from="1" to="0.9" dur="8s" repeatCount="indefinite" values="1; 0.9; 1"
    keyTimes="0; 0.5; 1" />
			</image>
		</pattern>        
    </defs>
    
    <polygon fill="url(#img1)" points="129,0.3 447.3,0.3 502.3,132 289.1,229.3 73.1,132.3  " id="top" />
    <polygon fill="url(#img2)" points="68.3,142.3 283,236.1 283,527.6 0,298 " id ="left" />
    <polygon fill="url(#img3)" points="508.4,142.5 293.8,236.3 293.8,527.8 576.8,298.1 " id="right"/>

</svg>
<div class="pentalink1">Текст 1</div>
<div class="pentalink2">Текст 2</div>
<div class="pentalink3">Текст 3</div>

</div>
</div>

CSS

.pentamenu { margin: 0 auto; width: 555px; padding-top: 80px; }
.pentm { position: absolute; width: 555px; height: 555px; }
.pentalink1 { position: absolute; left: 210px; top: 70px; text-transform: uppercase; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: 28px; color: #FFF; }
.pentalink2 { position: absolute; left: 80px; top: 270px; text-transform: uppercase; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: 28px; color: #FFF; }
.pentalink3 { position: absolute; left: 310px; top: 270px; text-transform: uppercase; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: 28px; color: #FFF; }
#top, #left, #right { cursor: pointer; }
svg { display: block; width: 100%; height: 500px; }

JavaScript

document.getElementById("top").onclick = function(){document.location.href = "http://www.site.ru";}
document.getElementById("left").onclick = function(){document.location.href = "http://www.site.ru";}
document.getElementById("right").onclick = function(){document.location.href = "http://www.site.ru";}