How to create such svg?

Question

css

Hello, trying to learn how to animate a burger in a cross, I found this

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <path class="line top"
    d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
  <path class="line middle" d="M 20,50 H 80" />
  <path class="line bottom"
    d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
<style>
  .line {
    fill: none;
    stroke: black;
    transition: 500ms;
  }


  .top {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }

  .middle {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }

  .bottom {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }



  svg:hover .top {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }

  svg:hover .middle {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }

  svg:hover .bottom {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
</style>

But how do you create one from scratch? What tools? How to change animation...
https://jsfiddle.net/xnvfzt52/

Answer 1

What tools?

adobe illustrator + some hands sometimes