hypr angle logo stroke

by phloe

HTML

<svg viewBox="-49 -49 806 403" xmlns="http://www.w3.org/2000/svg">
  <path d="M677.704 103H708V101H676.875L573.875 204H576.704L677.704 103Z"/>
  <path d="M403 103H532L403 232L403 305H405V232.692L536.8 101H403V103Z"/>
  <path d="M302 101V230L172.96 101H170.2L302 232.692V305H304V101H302Z"/>
  <path d="M2 204V75.7035L130.296 204H133.125L2 72.8751V0H0V204H2Z"/>
  <path d="M708 202H706V204H708V202Z"/>
</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 {
  transition: 3s 1s stroke-width ease-out;
  stroke: black;
}

path:hover {
  transition-duration: 0.3s;
  transition-delay: 0s;
  stroke-width: 98px;
}

JavaScript

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