JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg id="cats" viewbox="0,0,2880,2160">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOne" height="1" width="1">
      <image x="0" y="0" width="2880" height="2160" xlink:href="http://brightmags.com/wp-content/uploads/2015/06/cats.jpg"></image>
    </pattern>
  </defs>
  <rect  width="2880" height="2160"  />
  <g class="text">
  <text x="500" y="400" data-href="http://site1.com" >Cat-1</text>
  <text x="1100" y="500" data-href="http://site2.com" >Cat-2</text>
  <text x="1700" y="450" data-href="http://site3.com" >Cat-3</text>
  <text x="2000" y="1800" data-href="http://site4.com" >Cat-4</text>
  </g>
</svg>

CSS

#cats rect{
  fill:url(#image);
}
#cats text{
  fill:#fff;
  font-size:200px;
  font-family:Arial;
  transition:fill .3s;
}
#cats text:hover{
  cursor:pointer;
  fill:#aaa;
}

JavaScript

var menuItems = document.querySelectorAll(".text text");
for(var i = 0, l = menuItems.length; i < l; i++){
	menuItems[i].addEventListener("click", function(){
    window.location.href = this.getAttribute("data-href");
  });
}