hypr.link logo

by phloe

HTML

<svg stroke="#333" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      stroke: transparent;
    }
  </style>
  <defs>
    <mask id="mask">
      <rect fill="white" width="100%" height="100%" />
      <rect rx="3" x="-4" y="4" width="8" height="6" clip-path="inset(0 1.5 4.5 0)"/>
    </mask>
    <mask id="hole">
      <rect fill="white" width="100%" height="100%" />
	    <rect rx="1" x="2" y="2" width="2" height="4" />
    </mask>
    <rect id="link" rx="3" width="6" height="8" mask="url(#hole)" />
  </defs>
  <g transform="translate(3 1)">
	  <use href="#link" fill="purple" transform="rotate(-45)" transform-origin="3 7" />
	  <use href="#link" fill="cyan"  transform="rotate(45)" transform-origin="3 7" mask="url(#mask)" />
  </g>
</svg>