Menüanimation

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
	* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
  background-color: white;
}
svg {
  position: absolute;
  top: -8px;
  left: -8px;
  transform: scale(0.07);
  transform-origin: 0 0;
}
svg path {
  stroke: #000;
  stroke-width: 25px;
  fill: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: 1s;
}
path#pathA {
  stroke-dashoffset: 5803.15;
  stroke-dasharray: 2901.57, 2981.57, 240;
}
path#pathA.svg {
  stroke-dashoffset: 5803.15;
  stroke-dasharray: 2901.57, 5258.15, 240;
}
path#pathB {
  stroke-dashoffset: 800;
  stroke-dasharray: 400, 480, 240;
}
path#pathB.svg {
  stroke-dashoffset: 800;
  stroke-dasharray: 400, 600, 0;
}
path#pathC {
  stroke-dashoffset: 6993.11;
  stroke-dasharray: 3496.56, 3576.56, 240;
}
path#pathC.svg {
  stroke-dashoffset: 6993.11;
  stroke-dasharray: 3496.56, 6448.11, 240;
}

    </style>
   
  </head>
  <body id="click">
    <svg width="1000px" height="1000px">
      <path
        id="pathA"
        d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"
      ></path>
      <path id="pathB" d="M 300 500 L 700 500"></path>
      <path
        id="pathC"
        d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"
      ></path>
    </svg>
   <script>
	var x = document.getElementById('click');
var a = document.getElementById('pathA');
var b = document.getElementById('pathB');
var c = document.getElementById('pathC');

x.onclick = function () {
  a.classList.toggle('svg');
  b.classList.toggle('svg');
  c.classList.toggle('svg');
};

   </script>
  </body>
</html>
Gleaming Grivet