1
2
3
4
5
6
7
8
9
10

  <svg class="hexagon-mask" viewBox="0 0 560 645" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
      <clipPath id="hex-mask">
        <polygon points="270,0 0,160 0,485 270,645 560,485 560,160"></polygon>
      </clipPath>
    </g>
 
    <image clip-path="url(#hex-mask)" height="100%" width="100%" xlink_href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
    <polygon clip-path="url(#hex-mask)" points="270,0 0,160 0,485 270,645 560,485 560,160" stroke="#19195A" stroke-width="30" fill="none" height="100%" width="100%" preserveAspectRatio="xMidYMin slice"></polygon>
  </svg>