style.css

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins';
}

.navbar-open {
  display: flex;
  animation-duration: 1s;
  animation-name: navbar_open;
}

@keyframes navbar_open {
  from {
    height: 1%;
    box-shadow: var(--shadow);
    opacity: 0;
  }

  to {
    height: 100%;
    opacity: 100%;
    box-shadow: var(--ring-offset-shadow,0 0 #0000),var(--ring-shadow,0 0 #0000),var(--shadow);
  }
}

/* Line Navbar */

.line {
  fill: none;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 25px;
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
  stroke: #000;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
  stroke: #000;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
  stroke: #000;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
  stroke: #000;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
  stroke: #000;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
  stroke: #000;
}