hercule.svg

<svg viewBox="0 0 304 282" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
      @media all and (max-width: 256px) {
        #border_white { stroke-width: 12; }
        #border_blue  { stroke-width: 3; }
        .border_inner { stroke-width: 2; }
      }
      @media all and (max-width: 128px) {
        #border_white { stroke-width: 16; }
        #border_blue  { stroke-width: 4; }
        .border_inner { stroke-width: 3; }
      }
      @media all and (max-width: 92px) {
        #border_white { stroke-width: 24; }
        #border_blue  { stroke-width: 6; }
        .border_inner { stroke-width: 4; }
      }
      @media all and (max-width: 64px) {
        #border_white { stroke-width: 32; }
        #border_blue  { stroke-width: 8; }
        .border_inner { stroke-width: 0; }
      }
      @media all and (max-width: 48px) {
        #border_white { stroke-width: 38; }
        #border_blue  { stroke-width: 10; }
        .border_inner { stroke-width: 0; }
      }
  </style>
  </defs>
  <defs>
    <path id="a" d="M293.78 84.48v128L164.38 257v-28.43l47.32-16.1V129L82.1 173.74V257L0 173.52v-128L129.4 1v28.74L82.3 45.52V129l129.4-44.74V1l82.08 83.48z" />
  </defs>
  <g fill="none" fill-rule="evenodd">
    <g class="border_inner" opacity=".2" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 184.52L134.4 140l82.08 83.48L87.08 268 5 184.52z" fill="#83C9CB"/>
      <path d="M87.1 184.52L216.47 140l82.1 83.48L169.17 268l-82.1-83.48z" fill="#00B1B1"/>
      <path d="M135.78 140V12L6.38 56.52v128L135.8 140z" fill="#2C0078"/>
      <path d="M298.57 223.48v-128L216.47 12v128l82.1 83.48z" fill="#1E1D73"/>
    </g>
    <g opacity=".4">
      <path d="M155.14 33.1L134.4 12v128l20.74 21.1v-128z" fill="#2C0078"/>
      <path d="M155.14 33.1L216.48 12v128l-61.34 21.1v-128z" fill="#2C0078"/>
      <path d="M216.48 223.45V95.5l-61.34-62.4v128l61.34 62.35zM87.1 56.58v127.94l68.04-23.42v-128L87.1 56.58z" fill="#2C0078"/>
      <path class="border_inner" d="M216.48 223.48v-128L134.38 12v128l82.1 83.48z" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="border_inner" d="M216.48 140V12L87.08 56.52v128L216.5 140z" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g opacity=".4">
      <path d="M148.42 118.9l68.06-23.42v128l-68.06 23.42v-128zm0 0L87.1 56.52v128l61.32 62.38v-128z" fill="#83C9CB"/>
      <path d="M148.42 118.9v128l20.75 21.1V140l-20.75-21.1zm0 128v-128L87.1 140v128l61.32-21.1z" fill="#83C9CB"/>
      <path class="border_inner" d="M216.48 223.48v-128L87.08 140v128l129.4-44.52z" stroke="#FFF"/>
      <path class="border_inner" d="M169.17 268V140L87.1 56.52v128L169.16 268z" stroke="#FFF"/>
    </g>
    <g class="border_inner" opacity=".4" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 56.52L134.4 12l82.08 83.48L87.08 140 5 56.52z" fill="#83C9CB"/>
      <path d="M87.1 56.52L216.47 12l82.1 83.48L169.17 140l-82.1-83.48z" fill="#53A0FD"/>
      <path d="M87.1 268V140L5 56.52v128L87.1 268z" fill="#0BD3D2"/>
      <path d="M298.57 223.48v-128L169.17 140v128l129.4-44.52z" fill="#53A0FD"/>
    </g>
    <g transform="translate(5 12)">
      <use id="border_white" stroke="#FFF" stroke-width="10" xlink:href="#a"/>
      <use id="border_blue" stroke="#1E1D73" stroke-width="2" xlink:href="#a"/>
    </g>
  </g>
</svg>