hypr angle logo wave

by phloe

HTML

<svg viewBox="-50 -50 691 395">
  <g>
    <g>
      <path d="M0 0H79V79L214.861 215H103.139L79 190.866V215H0V0Z"/>
      <path d="M295 79V294H216V214.866L80.1385 79H191.861L216 103.143V79L295 79Z"/>
    </g>
    <g>
      <path d="M510.861 79L375 214.866V294H296V182.143L320.138 158H296V79L510.861 79Z"/>
      <path d="M512.143 79L376.139 215H487.861L547.861 156H591V79H512.143Z"/>
    </g>
    <path d="M512 192.627L548.2 157H591V215H512V192.627ZM512 0H591V78H512V0Z" fill-opacity="0.5"/>
  </g>
</svg>

CSS

g > g:nth-child(1) {
  animation: .5s vert infinite alternate ease-in-out;
}

g > g:nth-child(1) > path:nth-child(1) {
  animation: 0.51s h infinite alternate ease-in-out;
}

g > g:nth-child(2) {
  animation: 0.52s vert infinite alternate ease-in-out;
}

g > g:nth-child(2) > path:nth-child(2) {
  animation: 0.53s r infinite alternate ease-in-out;
}

@keyframes vert {
  0 {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(50px);
  }
}

@keyframes h {
  0 {
    transform: translate(0);
  }
  100% {
    transform: translate(-50px, -50px);
  }
}

@keyframes r {
  0 {
    transform: translate(0);
  }
  100% {
    transform: translate(50px, -50px);
  }
}

JavaScript

let folded = false;
document.body.addEventListener("click", () => {
	folded = !folded;
  if (folded) {
  	document.body.classList.add("folded");
  }
  else {
  	document.body.classList.remove("folded");
  }
});