<header>
        <a href="#" class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.67 24.13"><path d="M20.06,24.13h-7.8l-6-9.28v9.28H0V0H9.76a9.68,9.68,0,0,1,3.52.59,6.94,6.94,0,0,1,2.48,1.62,6.76,6.76,0,0,1,1.47,2.37,8.22,8.22,0,0,1,.5,2.88,7,7,0,0,1-1.33,4.46,6.73,6.73,0,0,1-3.92,2.32ZM6.27,10.78H7.46A4.57,4.57,0,0,0,10.3,10a2.62,2.62,0,0,0,1-2.21,2.61,2.61,0,0,0-1-2.21,4.57,4.57,0,0,0-2.84-.77H6.27Z"/><path d="M38,5.31H30.56v4h7v5.32h-7v4.16H38v5.31H24.29V0H38Z"/><path d="M48.42,0l5.82,14.69L60.1,0h6.81L56.74,24.13h-5L41.6,0Z"/><path d="M107,24.13,101.12,9.45,95.27,24.13H88.45L98.63,0h5l10.14,24.12Z"/><path d="M84.77,5.31H77.31v4h7v5.32h-7v4.16h7.46v5.31H71V0H84.77Z"/><path d="M124.41,0V18.82h7.52v5.31H118.14V0Z"/><path d="M150.49,5.31H143v4h7v5.32h-7v4.16h7.45v5.31H136.77V0h13.72Z"/><path d="M176.67,24.13h-7.81l-6-9.28v9.28h-6.27V0h9.76a9.72,9.72,0,0,1,3.52.59,6.94,6.94,0,0,1,2.48,1.62,6.76,6.76,0,0,1,1.47,2.37,8.22,8.22,0,0,1,.49,2.88A7.1,7.1,0,0,1,173,11.92a6.76,6.76,0,0,1-3.92,2.32ZM162.88,10.78h1.18a4.59,4.59,0,0,0,2.85-.76,2.64,2.64,0,0,0,1-2.21,2.63,2.63,0,0,0-1-2.21,4.58,4.58,0,0,0-2.85-.77h-1.18Z"/></svg>
        </a>
        <div>
            <button class="header__button nav-btn-js" type="button"></button>
            <nav class="header__nav nav-js" data-active="false">
                <a href="#" class="logo logo--white">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.67 24.13"><path d="M20.06,24.13h-7.8l-6-9.28v9.28H0V0H9.76a9.68,9.68,0,0,1,3.52.59,6.94,6.94,0,0,1,2.48,1.62,6.76,6.76,0,0,1,1.47,2.37,8.22,8.22,0,0,1,.5,2.88,7,7,0,0,1-1.33,4.46,6.73,6.73,0,0,1-3.92,2.32ZM6.27,10.78H7.46A4.57,4.57,0,0,0,10.3,10a2.62,2.62,0,0,0,1-2.21,2.61,2.61,0,0,0-1-2.21,4.57,4.57,0,0,0-2.84-.77H6.27Z"/><path d="M38,5.31H30.56v4h7v5.32h-7v4.16H38v5.31H24.29V0H38Z"/><path d="M48.42,0l5.82,14.69L60.1,0h6.81L56.74,24.13h-5L41.6,0Z"/><path d="M107,24.13,101.12,9.45,95.27,24.13H88.45L98.63,0h5l10.14,24.12Z"/><path d="M84.77,5.31H77.31v4h7v5.32h-7v4.16h7.46v5.31H71V0H84.77Z"/><path d="M124.41,0V18.82h7.52v5.31H118.14V0Z"/><path d="M150.49,5.31H143v4h7v5.32h-7v4.16h7.45v5.31H136.77V0h13.72Z"/><path d="M176.67,24.13h-7.81l-6-9.28v9.28h-6.27V0h9.76a9.72,9.72,0,0,1,3.52.59,6.94,6.94,0,0,1,2.48,1.62,6.76,6.76,0,0,1,1.47,2.37,8.22,8.22,0,0,1,.49,2.88A7.1,7.1,0,0,1,173,11.92a6.76,6.76,0,0,1-3.92,2.32ZM162.88,10.78h1.18a4.59,4.59,0,0,0,2.85-.76,2.64,2.64,0,0,0,1-2.21,2.63,2.63,0,0,0-1-2.21,4.58,4.58,0,0,0-2.85-.77h-1.18Z"/></svg>
                </a>
                <ul class="header__menu">
                    <li class="header__menu-item"><a href="#">Works</a></li>
                    <li class="header__menu-item"><a href="#">News</a></li>
                    <li class="header__menu-item"><a href="#">About</a></li>
                    <li class="header__menu-item"><a href="#">Help</a></li>
                    <li class="header__menu-item"><a href="#">Contacts</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1>What a great nav menu with circular reveal animation?</h1>
    <footer>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224.27 20"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="first_screen" data-name="first screen"><path class="cls-1" d="M0,2C11.21,2,11.21,18,22.43,18S33.64,2,44.85,2,56.06,18,67.27,18,78.48,2,89.69,2s11.22,16,22.43,16S123.34,2,134.55,2,145.76,18,157,18,168.19,2,179.4,2s11.22,16,22.43,16S213.05,2,224.27,2"/></g></g></svg>
    </footer>

:root {
  font-size: 14px;
}

body {
  margin: 0;
  padding: 40px 30px;
  height: 100vh;
  background-color: #ffdb00;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

header {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.logo {
  width: 120px;
  overflow: hidden;
}

.logo--white path {
  fill: #fff;
}

.logo svg {
  max-width: 100%;
  height: auto;
}

.header__button {
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -18px;
  outline: none;
  animation-duration: 300ms;
  animation-timing-function: ease;
}

.header__button[data-open='true'] {
  background-color: hsl(52, 100%, 50%);
  animation-name: scale;
}

.header__button[data-open='false'] {
  transition: background-color 250ms linear;
}

@keyframes scale {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(100%);
  }
}

h1 {
  font-size: 3rem;
  font-weight: normal;
  margin: 0;
  margin-bottom: 3rem;
}

footer svg {
  width: 15%;
}

.header__nav {
  background-color: black;
  position: fixed;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  visibility: hidden;
  clip-path: circle(var(--radius) at calc(100% - 55px) 47px);
}

.header__nav[data-active='true'] {
  visibility: visible;
}

.header__menu {
  padding: 0;
  margin: 0;
}

.header__menu > .header__menu-item {
  font-size: 10vh;
}

.header__menu > .header__menu-item:not(:last-of-type) {
  margin-bottom: 0.1em;
}

.header__menu-item a {
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.header__menu-item a:hover {
  font-style: italic;
}

// https://github.com/VoloshchenkoAl/revealer
document.addEventListener('DOMContentLoaded', () => {
  const revealerNav = window.revealer({
    revealElementSelector: '.nav-js',
    options: {
      anchorSelector: '.nav-btn-js',
    },
  });

  const actionBtn = document.querySelector('.nav-btn-js');
  actionBtn.addEventListener('click', () => {
    if (!revealerNav.isRevealed()) {
      revealerNav.reveal();
      actionBtn.setAttribute('data-open', true);
    } else {
      revealerNav.hide();
      actionBtn.setAttribute('data-open', false);
    }
  });
});