<section class="logotype">
  <a href="">
    <i><svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 120 120"><path class="left-up" d="M41.55 0H0v41.55h10.02V10.02h31.53V0z"/><path class="right-down" d="M73.08 41.55v31.53H41.55V83.1H83.1V41.55H73.08z"/><path class="right-up" d="M63.11.07h19.92v19.92H63.11z"/><path class="left-down" d="M.06 63.1h19.92v19.92H.06z"/></svg></i>
    <h3 class="title">Something</h3>
  </a>
</section>

<section class="logotype">
  <a href="">
    <i><svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 120 120"><path class="left-up" d="M41.55 0H0v41.55h10.02V10.02h31.53V0z"/><path class="right-down" d="M73.08 41.55v31.53H41.55V83.1H83.1V41.55H73.08z"/><path class="right-up" d="M63.11.07h19.92v19.92H63.11z"/><path class="left-down" d="M.06 63.1h19.92v19.92H.06z"/></svg></i>
    <h3 class="title">Something</h3>
  </a>
</section>

* {
  text-decoration: none;
  color: black;
}
.logotype i {
  padding: 10px;
  vertical-align: middle;
}
.logotype h3 {
  display: inline-block;
  vertical-align: middle;
}
.logo {
  fill: black;
  width: 40px;
}

const logotypeElements = document.querySelectorAll('.logotype');

logotypeElements.forEach(container => {
  // Get the variables we're going to use
  const logo = container.querySelector('.logo'),
        squareTop = container.querySelectorAll('.right-up'),
        squareBottom = container.querySelectorAll('.left-down');

  // Create our animation
  const toggleLogo = gsap.timeline({
    reversed: true, 
    paused: true, 
    defaults: {duration: 0.3}
  });
  
  toggleLogo
    .to(logo, {rotation: 135}, 0)
    .to(squareTop, {fill: "#32e0c4"}, "<")
    .to(squareBottom, {fill: "#32e0c4"}, "<")
  
  // Control the animation using event listeners
  container.addEventListener("mouseenter", () => toggleLogo.play());
  container.addEventListener("mouseleave", () => toggleLogo.reverse());
});