<div class="magic"></div>

body {
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#26ada7;
}

.magic {
  width:150px;
  position:relative;
  cursor:pointer;
  height:150px;
  --p:50px;
  background:
    radial-gradient(farthest-side at top,#b78d5c 95%,#0000)50% calc(23.5% + var(--p))/9% 2%,
    radial-gradient(farthest-side at top,#000 95%,#0000)50% calc(24% + var(--p))/9% 4%,
    radial-gradient(farthest-side,#000 95%,#0000)57% calc(13% + var(--p))/6% 7%,
    radial-gradient(farthest-side,#000 95%,#0000)43% calc(13% + var(--p))/6% 7%,
    radial-gradient(farthest-side,#b78d5c 98%,#0000)50% calc(17% + var(--p))/23% 25%,
    radial-gradient(farthest-side,#b78d5c 98%,#0000)43% calc(9% + var(--p))/15% 15%,
    radial-gradient(farthest-side,#b78d5c 98%,#0000)57% calc(9% + var(--p))/15% 15%,
    radial-gradient(farthest-side,#9b6f43 98%,#0000)50% calc(0% + var(--p))/35% 35%,
    radial-gradient(farthest-side,#58341c 98%,#0000)68% calc(5% + var(--p))/15% 15%,
    radial-gradient(farthest-side,#58341c 98%,#0000)32% calc(5% + var(--p))/15% 15%,
    
    radial-gradient(farthest-side at bottom,#0000 55%,#535152 55.5% 98%,#0000) top/100% 20%,   
    linear-gradient(#010101 0 0) 50% 10%/60% 30%;
  background-repeat:no-repeat;
  transition:0.5s;
}
.magic:hover {
  --p:0px;
  transition:0.5s 0.8s;
}
.magic:before {
  content:"";
  position:absolute;
  inset:20% 0 0;
  background:
    radial-gradient(farthest-side at top,#0000 55%,#535152 55.5% 98%,#0000) top/100% 20%,
    radial-gradient(50% 50% at top,#251f21 98%,#0000)50% 100%/60% 20%,
    radial-gradient(50% 50% at top,#b00d01 98%,#0000)50% 44% /60% 20%,
    linear-gradient(#b00d01 0 0) 50% 20%/60% 20%,
    linear-gradient(#251f21 0 0) 50% 44%/60% 65%;
  background-repeat:no-repeat;
}
.magic:after {
  content: "";
  position: absolute;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg,#fff 15%,#232628 0 85%,#fff 0);
  right: -50%;
  top: -20%;
  filter: drop-shadow(0px 0px 1px black);
  transform-origin: right;
  transform:rotate(0deg);
}

.magic:hover:after {
  transform:rotate(-.2deg);
  transition:.8s cubic-bezier(0,150,1,150);
}