<details>
  <summary class="hidden-summary">Magic</summary>
</details>
<svg height="100vh" width="100vw" viewBox="0 0 76 61"> <g class="menu"> <path d="M16.182,0l-10.788,0l-5.394,9.343l5.394,9.342l10.788,0l5.394,-9.342l-5.394,-9.343Z" fill="#e6e6e6" fill-rule="nonzero"></path> <path d="M5.999,17.637l9.578,0l4.788,-8.294l-4.788,-8.294l-9.578,0l-4.788,8.294l4.788,8.294Z" fill="#fff" fill-rule="nonzero"></path> <g class="text"> <path d="M5.27,9.487l2.269,2.269l-0.977,0l-2.269,-2.269l2.269,-2.269l0.977,0l-2.269,2.269Z" fill="#e2e2e2" fill-rule="nonzero"></path> <path d="M10.409,12.178c-0.317,0 -0.608,-0.062 -0.874,-0.184c-0.266,-0.123 -0.498,-0.29 -0.695,-0.502c-0.198,-0.213 -0.351,-0.459 -0.462,-0.74c-0.111,-0.281 -0.166,-0.583 -0.166,-0.906c0,-0.323 0.055,-0.625 0.166,-0.906c0.111,-0.281 0.264,-0.527 0.462,-0.74c0.197,-0.212 0.429,-0.379 0.695,-0.502c0.266,-0.122 0.557,-0.184 0.874,-0.184c0.341,0 0.652,0.077 0.933,0.229c0.281,0.152 0.496,0.336 0.646,0.552l0,-2.933l0.771,0l0,6.726l-0.771,0l0,-0.691c-0.15,0.216 -0.365,0.4 -0.646,0.552c-0.281,0.152 -0.592,0.229 -0.933,0.229Zm0.117,-0.709c0.227,0 0.433,-0.042 0.619,-0.125c0.185,-0.084 0.345,-0.199 0.479,-0.346c0.135,-0.146 0.239,-0.318 0.314,-0.515c0.075,-0.198 0.112,-0.41 0.112,-0.637c0,-0.227 -0.037,-0.439 -0.112,-0.637c-0.075,-0.197 -0.179,-0.369 -0.314,-0.515c-0.134,-0.147 -0.294,-0.262 -0.479,-0.346c-0.186,-0.083 -0.392,-0.125 -0.619,-0.125c-0.227,0 -0.435,0.042 -0.624,0.125c-0.188,0.084 -0.349,0.199 -0.484,0.346c-0.134,0.146 -0.239,0.318 -0.314,0.515c-0.074,0.198 -0.112,0.41 -0.112,0.637c0,0.227 0.038,0.439 0.112,0.637c0.075,0.197 0.18,0.369 0.314,0.515c0.135,0.147 0.296,0.262 0.484,0.346c0.189,0.083 0.397,0.125 0.624,0.125Z" fill="#e2e2e2" fill-rule="nonzero"></path> <path d="M13.781,7.218l0.978,0l2.269,2.269l-2.269,2.269l-0.978,0l2.269,-2.269l-2.269,-2.269Z" fill="#e2e2e2" fill-rule="nonzero"></path> </g> </g> <g class="menu"> <path d="M69.606,0l-10.788,0l-5.394,9.343l5.394,9.342l10.788,0l5.394,-9.342l-5.394,-9.343Z" fill="#e6e6e6" fill-rule="nonzero"></path> <path d="M59.423,17.637l9.578,0l4.788,-8.294l-4.788,-8.294l-9.578,0l-4.788,8.294l4.788,8.294Z" fill="#fff" fill-rule="nonzero"></path> <g class="text"> <path d="M59.623,9.252l2.269,2.269l-0.977,0l-2.269,-2.269l2.269,-2.269l0.977,0l-2.269,2.269Z" fill="#e2e2e2" fill-rule="nonzero"></path> <path d="M64.359,11.943c-0.24,0 -0.467,-0.03 -0.682,-0.09c-0.215,-0.06 -0.404,-0.148 -0.565,-0.265c-0.161,-0.116 -0.293,-0.261 -0.395,-0.435c-0.101,-0.173 -0.161,-0.373 -0.179,-0.6l0.789,0c0.024,0.137 0.071,0.252 0.139,0.345c0.069,0.093 0.151,0.169 0.247,0.229c0.096,0.059 0.199,0.101 0.309,0.125c0.111,0.024 0.226,0.036 0.346,0.036c0.245,0 0.449,-0.049 0.614,-0.148c0.164,-0.099 0.246,-0.247 0.246,-0.444c0,-0.179 -0.056,-0.326 -0.17,-0.439c-0.113,-0.114 -0.305,-0.207 -0.574,-0.278l-0.646,-0.171c-0.388,-0.101 -0.678,-0.266 -0.869,-0.493c-0.192,-0.227 -0.287,-0.502 -0.287,-0.825c0,-0.185 0.038,-0.353 0.116,-0.502c0.078,-0.15 0.185,-0.277 0.323,-0.381c0.138,-0.105 0.3,-0.186 0.489,-0.242c0.188,-0.057 0.396,-0.086 0.623,-0.086c0.239,0 0.454,0.033 0.646,0.099c0.191,0.066 0.357,0.157 0.497,0.273c0.141,0.117 0.253,0.253 0.337,0.409c0.083,0.155 0.134,0.322 0.152,0.502l-0.771,0c-0.06,-0.198 -0.166,-0.353 -0.318,-0.467c-0.153,-0.113 -0.334,-0.17 -0.543,-0.17c-0.215,0 -0.398,0.049 -0.547,0.148c-0.149,0.099 -0.224,0.235 -0.224,0.408c0,0.167 0.054,0.3 0.161,0.399c0.108,0.099 0.281,0.181 0.52,0.247l0.718,0.188c0.376,0.096 0.662,0.256 0.856,0.48c0.195,0.224 0.292,0.507 0.292,0.847c0,0.222 -0.042,0.414 -0.126,0.579c-0.084,0.164 -0.2,0.3 -0.35,0.408c-0.149,0.107 -0.324,0.187 -0.524,0.237c-0.201,0.051 -0.417,0.077 -0.65,0.077Z" fill="#e2e2e2" fill-rule="nonzero"></path> <path d="M66.672,6.983l0.978,0l2.269,2.269l-2.269,2.269l-0.978,0l2.269,-2.269l-2.269,-2.269Z" fill="#e2e2e2" fill-rule="nonzero"></path> </g> </g> <g class="selected"> <path d="M42.635,0.091l-10.683,0l-5.342,9.252l5.342,9.252l10.683,0l5.342,-9.252l-5.342,-9.252Z" fill="#e6e6e6" fill-rule="nonzero" class="outline"></path> <path d="M32.552,17.556l9.484,0l4.742,-8.213l-4.742,-8.214l-9.484,0l-4.742,8.214l4.742,8.213Z" fill="#fff" fill-rule="nonzero"></path> <circle cx="32.437" cy="6.892" r="0.438" fill="#6c63ff"></circle> <circle cx="32.437" cy="9.343" r="0.438" fill="#6c63ff"></circle> <circle cx="32.437" cy="11.793" r="0.438" fill="#6c63ff"></circle> <rect x="34.275" y="6.542" width="8.313" height="0.7" fill="#6c63ff"></rect> <rect x="34.275" y="8.993" width="8.313" height="0.7" fill="#6c63ff"></rect> <rect x="34.275" y="11.443" width="8.313" height="0.7" fill="#6c63ff"></rect> <g class="overlay"> <path d="M32.552,17.556l9.484,0l4.742,-8.213l-4.742,-8.214l-9.484,0l-4.742,8.214l4.742,8.213Z" fill="#6c63ff" fill-rule="nonzero"></path> <circle cx="32.437" cy="6.892" r="0.438" fill="#fff"></circle> <circle cx="32.437" cy="9.343" r="0.438" fill="#fff"></circle> <circle cx="32.437" cy="11.793" r="0.438" fill="#fff"></circle> <rect x="34.275" y="6.542" width="8.313" height="0.7" fill="#fff"></rect> <rect x="34.275" y="8.993" width="8.313" height="0.7" fill="#fff"></rect> <rect x="34.275" y="11.443" width="8.313" height="0.7" fill="#fff"></rect> </g> </g> <g class="magic"><path d="M56.099,9.988l-14.057,0l-7.029,12.174l7.029,12.174l14.057,0l7.029,-12.174l-7.029,-12.174Z" fill="#e6e6e6" class="outline"></path> <path d="M42.832,32.968l12.479,0l6.239,-10.806l-6.239,-10.808l-12.479,0l-6.24,10.808l6.24,10.806Z" fill="#fff" fill-rule="nonzero"></path> <g fill="#6c63ff" style="transform: translate(44.5px, 17px) scale(1.2)"> <path d="M2.519,1.395l-0.968,0.542l0.542,-0.968l-0.542,-0.969l0.968,0.542l0.969,-0.542l-0.543,0.969l0.543,0.968l-0.969,-0.542Z" class="sparkle"></path> <path d="M7.169,5.192l0.968,-0.543l-0.542,0.969l0.542,0.969l-0.968,-0.543l-0.969,0.543l0.542,-0.969l-0.542,-0.969l0.969,0.543Z" class="sparkle"></path> <path d="M8.137,0l-0.542,0.969l0.542,0.968l-0.968,-0.542l-0.969,0.542l0.542,-0.968l-0.542,-0.969l0.969,0.542l0.968,-0.542Z" class="sparkle"></path> <path d="M5.181,2.05l0.907,0.906c0.151,0.144 0.151,0.396 0,0.546l-4.522,4.522c-0.151,0.152 -0.403,0.152 -0.546,0l-0.907,-0.907c-0.151,-0.143 -0.151,-0.395 0,-0.546l4.522,-4.521c0.135,-0.136 0.351,-0.15 0.546,0Zm-0.399,2.127l0.946,-0.945l-0.822,-0.822l-0.945,0.945l0.821,0.822Z"></path> </g> </g> <ellipse cx="54.045" cy="59.113" rx="8.008" ry="1.695" fill="#e6e6e6"></ellipse> <path d="M52.344,16.278c0,0 0.875,3.264 1.619,3.481c0.743,0.217 -3.966,0.894 -3.966,0.894l-0.104,-2.925l2.451,-1.45Z" fill="#a0616a" fill-rule="nonzero"></path> <path d="M48.498,36.639l0.871,1.867l0.995,-0.996l-0.622,-1.493l-1.244,0.622Z" fill="#a0616a" fill-rule="nonzero"></path> <path d="M59.323,35.519l-0.249,1.742l-0.746,-0.497l0,-1.867l0.995,0.622Z" fill="#a0616a" fill-rule="nonzero"></path> <path d="M48.622,54.308l-0.373,2.986l1.991,0.125l-0.249,-3.111l-1.369,0Z" fill="#a0616a" fill-rule="nonzero"></path> <path d="M59.572,54.308l0.373,2.986l-1.991,0.125l0.249,-3.111l1.369,0Z" fill="#a0616a" fill-rule="nonzero"></path> <path d="M49.493,35.644c0,0 -0.871,2.364 -0.746,3.359c0.124,0.996 -0.996,6.097 -0.622,6.595c0.373,0.498 0.373,1.12 0.124,1.493c-0.249,0.373 -0.373,-0.124 -0.249,0.498c0.125,0.622 -0.124,3.733 0,4.23c0.125,0.498 -0.373,0.622 -0.124,1.12c0.249,0.498 0.622,1.991 0.622,1.991l1.618,-0.124l0.248,-1.369c0,0 0.747,-0.125 0.623,-0.871c-0.125,-0.747 0.622,-5.724 0.622,-5.724l2.115,-6.968l2.986,6.346c0,0 0.125,4.48 0.498,4.977c0.373,0.498 -0.373,1.867 0,2.364c0.373,0.498 0.746,1.369 0.746,1.369l1.867,0l0,-0.995c0,0 1.12,-0.623 0,-2.489l-0.249,-10.701l-0.747,-5.101l-9.332,0Z" fill="#2f2e41" fill-rule="nonzero"></path> <path d="M50.489,56.921c0,0 -0.871,-0.373 -1.244,-0.125c-0.374,0.249 -0.623,-0.124 -0.623,-0.124c0,0 -0.497,-0.249 -0.622,0.124c-0.095,0.263 -0.221,0.513 -0.373,0.747c-0.152,0.234 -0.747,1.369 -0.249,1.742c0.498,0.373 0.871,0.622 0.871,0.871c0,0.249 2.364,0.373 2.364,0c0,-0.373 -0.124,-3.235 -0.124,-3.235Z" fill="#2f2e41" fill-rule="nonzero"></path> <path d="M57.706,56.921c0,0 0.871,-0.373 1.244,-0.125c0.373,0.249 0.622,-0.124 0.622,-0.124c0,0 0.498,-0.249 0.622,0.124c0.096,0.263 0.221,0.513 0.373,0.747c0.153,0.234 0.747,1.369 0.249,1.742c-0.497,0.373 -0.871,0.622 -0.871,0.871c0,0.249 -2.364,0.373 -2.364,0c0,-0.373 0.125,-3.235 0.125,-3.235Z" fill="#2f2e41" fill-rule="nonzero"></path> <path d="M56.897,20.402c0,0 -3.484,-1.369 -5.351,-0.871c-1.866,0.497 -4.977,2.737 -4.852,3.235c0.124,0.498 1.306,6.283 1.306,6.283c0,0 0,3.484 0.622,4.604c0.623,1.12 0.747,1.991 0.747,1.991l-0.124,1.244c0,0 3.235,0.249 4.977,-0.498c1.742,-0.746 4.603,-0.248 4.603,-0.248c0,0 -1.493,-6.222 -2.239,-7.217c-0.747,-0.996 0.311,-8.523 0.311,-8.523Z" fill="#575a89" fill-rule="nonzero"></path> <path d="M47.751,22.455l-1.119,0.373c0,0 -0.996,1.493 -0.996,2.489c0,0.995 -0.124,7.216 0.374,8.087c0.497,0.871 0.995,2.613 1.741,2.738l0.871,1.119l1.494,-0.995l-0.498,-1.12l-1.867,-12.691Z" fill="#575a89" fill-rule="nonzero"></path> <path d="M55.217,20.588l1.238,-0.347l0.504,0.223c0,0 1.866,1.866 2.489,3.733c0.622,1.866 0.746,9.083 0.746,9.083c0,0 0.125,0.373 0,0.498c-0.124,0.124 -0.249,0.248 -0.249,0.497c0,0.249 -0.249,0.747 -0.249,0.747l-0.124,0.995l-1.244,-0.124c0,0 -2.364,-6.968 -2.364,-8.586c0,-1.617 -0.747,-6.719 -0.747,-6.719Z" fill="#575a89" fill-rule="nonzero"></path> <path d="M54.87,19.767c0,0 0.036,-0.61 -0.337,-0.734c-0.374,-0.124 -0.871,-0.747 -1.867,-0.498c-0.995,0.249 -3.608,0.622 -3.732,0.871c-0.125,0.249 -0.498,0.374 -0.374,0.622c0.125,0.249 0.374,0 0.125,0.249c-0.249,0.249 -0.374,0.125 -0.249,0.249c0.124,0.125 0.124,0.747 0.124,0.747c0,0 1.867,1.244 2.364,1.12c0.498,-0.125 3.468,-2.738 3.468,-2.738l0.478,0.112Z" fill="#575a89" fill-rule="nonzero"></path> <path d="M48.553,27.908l-0.126,4.239l0.996,2.986l-0.87,-7.225Z" fill-opacity="0.2" fill-rule="nonzero"></path> <path d="M57.141,26.057l1.126,4.088l-0.26,3.137l-0.866,-7.225Z" fill-opacity="0.2" fill-rule="nonzero"></path> <g class="head"> <circle cx="51.018" cy="16.044" r="2.641" fill="#a0616a"></circle> <path d="M48.771,15.862c0.186,0.476 0.373,0.952 0.559,1.429c0.229,0.585 0.491,1.211 1.029,1.538c0.663,0.403 1.548,0.206 2.189,-0.23c1.145,-0.78 1.728,-2.303 1.395,-3.648c-0.333,-1.345 -1.557,-2.42 -2.934,-2.577l-0.026,0.478l-0.587,-0.491c-0.156,0.314 -0.649,0.384 -0.887,0.125c0.155,0.32 -0.023,0.709 -0.28,0.954c-0.316,0.3 -1.218,0.662 -1.181,1.199c0.025,0.359 0.577,0.851 0.723,1.223Z" fill="#2f2e41" fill-rule="nonzero"></path> </g> </svg>

html {
  overflow: hidden;
}

* {
  transition: 0.5s cubic-bezier(0.8, -0.5, 0.2, 1.4);
  box-sizing: border-box;
}

details {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  .hidden-summary {
    height: 50vh;
  }
}

details[open] + svg {
  .menu {
    opacity: 0;
    transition: 0.2s ease, 0.2s 0.1s ease opacity;
    &:first-of-type {
      transform: translateX(27px);
    }
    &:nth-of-type(2) {
      transform: translateX(-27px);
    }
  }
  .selected {
    .outline {
      fill: #6c63ff;
    }
    .overlay {
      clip-path: circle(70.7% at 50% 50%);
    }
  }
  .magic {
    transform: translate(-2.5px, 16px) scale(0.8);
    opacity: 1;
    pointer-events: all;
  }
  .head {
    transform: rotate(-35deg);
  }
}

.selected {
  cursor: pointer;
  .outline {
    transition: 0.2s ease;
  }
  .overlay {
    clip-path: circle(0% at 50% 50%);
  }
  &:hover {
    .outline {
      fill: #6c63ff;
    }
  }
}

.magic {
  transform: translate(-2.5px, -8px) scale(0.8);
  opacity: 0;
  pointer-events: none;
  .sparkle {
    animation: sparkle 1s ease infinite;
    &:first-of-type {
      transform-origin: 2.3px 1.3px;
    }
    &:nth-of-type(2) {
      transform-origin: 7px 6px;
      animation-delay: 0.5s;
    }
    &:nth-of-type(3) {
      transform-origin: 7px 1px;
      animation-delay: 0.2s;
    }
  }
}

.head {
  transform-origin: 51px 17px;
}

@keyframes sparkle {
  50% {
    transform: scale(0);
  }
}