<svg viewBox="0 0 200 300" width="100">
  <path id="path" d="M50,150 150,0 200,0 100,150 200,300 200,300 150,300z" />
</svg>

<br>

<button id="button" type="button">Кнопка</button>
path {
  transition: 0.34s linear;
}
let id = document.getElementById("path");
let btn = document.getElementById("button");

btn.addEventListener("mouseover", function () {
  path.setAttribute(
    "d",
    "M0,150 100,0 200,0 100,150 200,300 200,300 100,300z",
    false
  );
});

btn.addEventListener("mouseout", function () {
  path.setAttribute(
    "d",
    "M50,150 150,0 200,0 100,150 200,300 200,300 150,300z",
    false
  );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.