hypr angle logo wings

by phloe

HTML

<svg viewBox="0 0 591 295">
  <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

body {
}

svg {
  perspective: 591px;
  transform-style: preserve-3d;
  transform: rotate3d(0, 0, 0, 0deg);
}

svg > g {
  transform-origin: 295px 0px;
  transition: 1s transform ease-in-out;
}

.folded svg > g {
  transform: rotate3d(1, 0, 0, -90deg);
}

g > g:nth-child(1) {
  transform-origin: 295px 0px;
  transition: 0.5s transform ease-in-out;
}

.folded g > g:nth-child(1) {
  transform: rotate3d(0, 1, 0, -90deg);
  transition-delay: 0.25s;
}

g > g:nth-child(1) > path:nth-child(1) {
  transform-origin: 214.861px 215px;
  transition: 0.5s 0.25s transform ease-in-out;
}

.folded g > g:nth-child(1) > path:nth-child(1) {
  transform: translate(-100px, -100px) rotate3d(-1, -1, 0, 90deg);
  transition-delay: 0s;
}

g > g:nth-child(2) {
  transform-origin: 296px 0px;
  transition: 0.5s transform ease-in-out;
}

.folded g > g:nth-child(2) {
  transform: rotate3d(0, 1, 0, 90deg);
  transition-delay: 0.25s;
}

g > g:nth-child(2) > path:nth-child(2) {
  transform-origin: 376.139px 215px;
  transition: 0.5s 0.25s transform ease-in-out;
}

.folded g > g:nth-child(2) > path:nth-child(2) {
  transform: translate(100px, -100px) rotate3d(1, -1, 0, -90deg);
  transition-delay: 0s;
}

path {
  stroke-width: 77px;
  stroke: red;
}

JavaScript

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