<svg viewBox="0 0 300 300" width="100">
  <defs>
    <circle id="circle" cx="20" cy="20" r="10" />
      <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="#fff"/>
        <stop offset="30%" stop-color="lightblue"/>
        <stop offset="60%" stop-color="darkblue"/>
        <stop offset="100%" stop-color="lightblue"/>
      </linearGradient>
     <style>
       polygon{
         transition: 0.14s linear;;
       }
       polygon:hover{
         stroke-opacity: 1;
       }
    </style>
   </defs>
  <g>
  
  <polygon points="150,10 290,80 290,220 150,290 10,220 10,80" fill="url(#lg)" stroke="#ccc" stroke-width="8" stroke-opacity="0" />
    <path d="M220,70 160,70 60,150 20,150" fill="none" stroke="white" stroke-width="2"/>
    <path d="M60,150 200,240" fill="none" stroke="white" stroke-width="2"/>
    <use href="#circle" x="150" y="50" fill="white"/>
    <use href="#circle" x="40" y="130" fill="white"/>
    <use href="#circle" x="150" y="200" fill="white"/>
  </g>
</svg>