[[[https://codepen.io/sonjastrieder/pen/2d092b10733ad0676f682d49fad86076]]]
<svg class="svg-defs" style="height: 0; position: absolute;">
  <defs>
    <mask id="RingSm" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".32" fill="white" />
      <circle cx=".5" cy=".5" r=".23" fill="black" />
    </mask>
    <mask id="RingLg" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".5" fill="white" />
      <circle cx=".5" cy=".5" r=".41" fill="black" />
<!--       <circle cx=".5" cy=".5" r=".5" fill="white" />
      <circle cx=".5" cy=".5" r=".41" fill="tomato" /> -->
    </mask>
    <symbol id="pic1">
      <image xlink:href="https://images.unsplash.com/uploads/1412862685615b0212e3d/5fcb0a55?dpr=1&auto=format&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" />
<!--       <rect y="0" width="500" height="500" fill="#111" fill-opacity="0.6" /> -->
    </symbol>
    <symbol id="pic2">
      <image xlink:href="https://images.unsplash.com/photo-1486122676632-ad1b5681fe33?dpr=1&auto=format&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" />
    </symbol>
    <symbol id="pic3">
      <image xlink:href="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?dpr=1&auto=format&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" />
    </symbol>
    
  </defs>
</svg>

<a class="u-vh Skip" href="#maincontent">Skip to main content</a>

<div class="Cover">
  <header class="Cover-content">
    <h1 class="MegaTitle MegaTitle--cover">
      octopuses 
      <span class="MegaTitle-sub">Academy</span>
    </h1>
    <p class="Subtext Subtext--cover">Lorem ipsum consectetur<br>
      adipisicing</p>
  </header>
  <div class="Cover-overlay">
    <nav class="CircleMenu">
      <ul class="CircleMenu-nav">
        <li>
          <a class="CircleMenu-nav-itemIco anim-triggerCircleMenu" href="#">
            <span class="u-vh">Home</span>
            <svg class="Ico"><use xlink:href="#icoLogo"></use></svg>
          </a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic2"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic2"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Eleven</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic1"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic1"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Twelve</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic3"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic3"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Thirteen</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic2"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic2"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="CircleMenu-nav-itemIco" href="#maincontent">
            <span class="CircleMenu-nav-itemIco-text">Scroll</span> 
            <svg class="Ico"><use xlink:href="#icoMouse"></use></svg>
          </a>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Fourteen</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic1"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic1"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Fifteen</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic3"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic3"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <a class="anim-triggerCircleMenu" href="#">Sixteen</a>
          <div class="CircleMenu-nav-itemImg">
            <div class="u-responsiveSquare">
              <svg viewBox="0 0 500 500">
                <use class="u-svgMaskRingLg anim-shiftOut" xlink:href="#pic2"></use>
                <use class="u-svgMaskRingSm anim-shiftIn" xlink:href="#pic2"></use>
              </svg>
            </div>
          </div>
        </li>
      </ul>
    </nav>
  </div>

</div>

<main id="maincontent">
  Thanks for watching!
</main>