<visbug-logo>
  <div class="head"></div>
  <div class="blend-containment">
    <div class="body"></div>
  </div>
</visbug-logo>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  place-content: center;
}

:root {
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

visbug-logo {
  inline-size: 50vmin;
  block-size: 50vmin;
  display: grid;
  grid: [stack] 1fr / [stack] 1fr;
  transform: rotateY(0.5turn);
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
  cursor: pointer;
}
visbug-logo > * {
  grid-area: stack;
}

.head {
  --size: 20vmin;
  --size-center-offset: calc(var(--size) / 2 * -1);

  inline-size: var(--size);
  block-size: var(--size);
  margin-top: var(--size-center-offset);
  margin-left: var(--size-center-offset);
  border-radius: 100vmax;
  background: black;
}

.body {
  background: yellow;
  border-radius: 25% 100% 0% 100% / 0% 100% 0% 100%;
}

@property --rotation {
  syntax: "<deg>";
  inherits: false;
  initial-value: 12deg;
}

.blend-containment::before,
.blend-containment::after {
  content: "";
  display: block;
  --rotation: 12deg;

  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  transform-origin: top left;
  mix-blend-mode: darken;
  transition: transform 0.2s ease;
  grid-area: stack;
}
.blend-containment::before {
  background: magenta;
  transform: rotateZ(var(--rotation));
}

.blend-containment::after {
  background: cyan;
  transform: rotateZ(calc(-1 * var(--rotation)));
}

.blend-containment {
  display: grid;
  grid: [stack] 1fr / [stack] 1fr;
  isolation: isolate;
}
.blend-containment:hover::before,
.blend-containment:hover::after {
  --rotation: 25deg;
  animation: rotate 1s linear infinite;
}

.blend-containment > .body {
  grid-area: stack;
}

@keyframes rotate {
  from {
    --rotation: 12deg;
  }
  to {
    --rotation: 25deg;
  }
}

let root = document.documentElement;

root.addEventListener("mousemove", (e) => {
  root.style.setProperty("--mouse-x", e.clientX + "px");
  root.style.setProperty("--mouse-y", e.clientY + "px");
});