Необходимо чтобы при ударе кирки, появлялись svg-трещины

Я новичок, и я создаю анимацию, используя svg, в которой кирка ударяет по блоку, и после этого должны появляться трещины, начиная с точки, в которую попала сама кирка, в случайном направлении вниз. Я был бы рад, если бы вы могли помочь.

  <svg class="main">
    <g id="pickaxe">
      <path d="M 130 200 Q280 5, 440 200 L 440 200 Q280 80 130 200"  fill="#808080" stroke-width="1" />
      <rect x="270" y="140" width="20" height="250" fill="#8B4513" />
    </g>
  </svg>
  <svg class="secondary">
    <rect x="0" y="0" width="200" height="200" fill="white" />
  </svg>
  <svg>
    <polyline points="0,200 100,125 0,75 100,0" fill="none" stroke="white" />
  </svg>  
  <button id="button" onclick="toggle()">hit!</button>

body {
    background-color: black;
}

button {
    position: absolute;
    left: 65%;
    top: 55%;
}

.main {
    position: absolute;
    left: 1250px;
    top: 80px;
    width: 560px;
    height: 450px;
}

.secondary {
    position: absolute;
    left: 1110px;
    top: 500px;
    width: 200px;
    height: 200px;
}

.pickaxe {
    transition: transform .3s;
    animation: move .3s infinite forwards;
    animation-play-state: paused;
}

@keyframes hit {
    from {
        transform: rotate(0deg);
        transform-origin: center 400px;  
    }
    to {
        transform: rotate(-60deg);
        transform-origin: center 400px;  
    }
}

@keyframes swing {
    from {
        transform: rotate(-60deg);
        transform-origin: center 400px; 
    }
    to {
        transform: rotate(0deg);
        transform-origin: center 400px; 
    }
}

.hit {
    animation-name: hit;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }
  
  .swing {
    animation-name: swing;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }

window.isSmall = true;
window.toggle = () => {
  const pickaxe = document.getElementById("pickaxe");
  if (isSmall) {
    pickaxe.classList.remove("swing");
    pickaxe.classList.add("hit");
    innerText = 'raise!';  
  } else {
    pickaxe.classList.remove("hit");
    pickaxe.classList.add("swing");
    innerText = 'hit!'; 
  }
  isSmall = !isSmall;
}