是否可以创建＆＃34;自画＆＃34; svg动画动画路径而不是笔画？

Question

我需要创建一个动画SVG徽标。 SVG本身包含​​单个路径。设计师为我提供了SVG和一个图像文件，用于解释动画步骤。

我知道如何基于笔画创建动画，但我不认为我知道如何按照她描绘的方式制作动画。

这是我知道如何制作的基本动画。它激发了路径周围的风格，与它应该是的结果相差甚远。

＆＃13;

＆＃13;

var path = document.querySelector("svg path");
var total_length = path.getTotalLength();

＆＃13;

svg {
  width: 100px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  fill: #ccc;
  stroke: #000;
  stroke-width: 1px;
  stroke-dasharray: 200px;
  stroke-dashoffset: 200px;
  animation-name: draw;
  animation-duration: 5s;
  animation-fill-mode: forwards; // Stay on the last frame
  animation-iteration-count: 1; // Run only once
  animation-timing-function: linear;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #000
  }
}

＆＃13;

<svg width="200" height="200" viewBox="0 13.4 42.9 56.3" enable-background="new 0 0 42.9 58.3" xml:space="preserve">
  <path d="M42.9,21.3L21.5,0L0,21.3v26.6h20.5v10.5h1.9V47.8h20.5V21.3z M41,35.8l-18.6,9.9v-5.6l16.2-8.7l-1.1-12.7
          l3.4,3.4V35.8z M7.6,16.5l3.9-3.8l-1.4,13.9l10.4,5.4v5.9L6.4,30.3L7.6,16.5z M36.6,30.3l-14.2,7.6V32L33,26.6l-1.4-13.8l3.9,3.9
          L36.6,30.3z M21.5,23.6l-3.7-4.1l3.6-12.3l3.4,12.3L21.5,23.6z M30.9,25.4l-8.5,4.4v-4.3l4.6-5.5L22.4,3.6l7,6.9L30.9,25.4z
           M15.7,20.1l4.8,5.3v4.4l-8.3-4.3l1.5-14.9l6.9-6.8L15.7,20.1z M5.5,18.6L4.4,31.4L20.5,40v5.6L1.9,35.8V22.1L5.5,18.6z M1.9,37.9
          l14.9,7.9H1.9V37.9z M26.2,45.9L41,38v7.9H26.2z" />
</svg>

＆＃13;

＆＃13;

＆＃13;

有没有办法按照设计师在提供的图片示例中描述的方式为这个svg设置动画？