Как анимировать SVG картинку при появлении?

Question

[Макс Darkleviathan]

По уроку создал svg картинку, подскажите знатоки как ее анимировать.
Картинка состоит из линий и элементов circle без заливок.
Нужно сделать анимацию рисующихся линий, которые формируют картинку при появлении и остается.

Вот сам код:

<svg>
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:100}
    .fil0 {fill:none}
    .fil1 {fill:#1F1B20}
   ]]>
  </style>
 </defs>
 <g>
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <polygon class="fil0 str0" points="16397,11548 8005,6441 4499,4191 4478,8535 12695,13579 16303,15794 "/>
  <polygon class="fil0 str0" points="8005,6441 10438,4941 10438,583 4499,4191 "/>
  <polygon class="fil0 str0" points="10438,4941 13822,7029 16417,4231 10438,583 "/>
  <polygon class="fil0 str0" points="12695,13579 10364,15125 10323,19443 16303,15794 "/>
  <polygon class="fil0 str0" points="10364,15125 6939,12997 4344,15794 10323,19443 "/>
  <circle class="fil1" cx="6938" cy="12997" r="294"/>
  <circle class="fil1" cx="4344" cy="15794" r="294"/>
  <circle class="fil1" cx="10364" cy="15125" r="294"/>
  <circle class="fil1" cx="10323" cy="19443" r="294"/>
  <circle class="fil1" cx="16303" cy="15794" r="294"/>
  <circle class="fil1" cx="12695" cy="13579" r="294"/>
  <circle class="fil1" cx="16397" cy="11548" r="294"/>
  <circle class="fil1" cx="4478" cy="8535" r="294"/>
  <circle class="fil1" cx="8005" cy="6441" r="294"/>
  <circle class="fil1" cx="4499" cy="4191" r="294"/>
  <circle class="fil1" cx="10438" cy="4941" r="294"/>
  <circle class="fil1" cx="13822" cy="7029" r="294"/>
  <circle class="fil1" cx="16417" cy="4231" r="294"/>
  <circle class="fil1" cx="10438" cy="583" r="294"/>
 </g>
</svg>

Answer 1

[lagudal]

не знаю, правильно ли понял смысл того что надо сделать, если как анимировать контуры то stroke-dasharray и stroke-dashoffset
Пример