Drawing svg mountain

with web Animations api

HTML

<script src="https://github.com/web-animations/web-animations-js/blob/master/web-animations-next.min.js"></script>
<div>
  <svg xml:space="preserve">
    <path class="mountain" d="M140.84,146.193l-32.373-50.206c12.715-0.282,22.973-10.705,22.973-23.487c0-12.958-10.542-23.5-23.5-23.5  
          c-9.119,0-17.278,5.188-21.179,13.324L78.18,49.015L51.057,91.071l-7.648-9.884L1.664,150H97.44c0.553,0,1-0.447,1-1s-0.447-1-1-1
          H5.217L34.858,99.14l4.333,5.473l4.754-6.018l4.755,6.019l5.208-6.592l9.741,12.59c0.074,0.095,0.166,0.166,0.263,0.227
          l-11.326,18.642c-0.287,0.473-0.137,1.087,0.335,1.374c0.162,0.099,0.342,0.146,0.519,0.146c0.338,0,0.667-0.171,0.855-0.48
          l20.05-33c0.287-0.473,0.137-1.087-0.335-1.374c-0.473-0.287-1.087-0.137-1.374,0.335l-7.65,12.591l-12.63-16.323l11.637-18.045
          l4.678,5.909l4.754-6.018l4.754,6.019l4.76-6.025l4.76,6.025l4.666-5.906l46.792,72.569c0.191,0.297,0.514,0.458,0.842,0.458
          c0.186,0,0.373-0.052,0.541-0.159C141.005,147.276,141.139,146.657,140.84,146.193z M48.7,101.387l-3.956-5.007
          c-0.342-0.433-0.97-0.507-1.404-0.165c-0.068,0.054-0.112,0.125-0.162,0.191l-0.033-0.026l-3.955,5.008l-3.224-4.073l7.645-12.603
          l9.037,11.68L48.7,101.387z M107.94,51c11.855,0,21.5,9.645,21.5,21.5S119.796,94,107.94,94c-0.146-0.002-0.288,0.001-0.437-0.009
          c-0.104-0.004-0.199,0.02-0.295,0.044L88.05,64.323C91.38,56.228,99.179,51,107.94,51z M87.7,77.387l-3.955-5.007
          c-0.138-0.174-0.327-0.273-0.526-0.327c-0.02-0.006-0.038-0.014-0.058-0.018c-0.073-0.015-0.145-0.018-0.22-0.016
          c-0.075-0.001-0.147,0.001-0.22,0.016c-0.02,0.005-0.039,0.012-0.058,0.019c-0.199,0.054-0.389,0.153-0.527,0.327l-3.955,5.007
          l-3.954-5.007c-0.341-0.433-0.97-0.507-1.405-0.165c-0.068,0.054-0.112,0.125-0.162,0.191l-0.034-0.027l-3.956,5.008l-3.531-4.461
          L78.18,52.705L91.221,72.93L87.7,77.387z" />
    <path class="bird"...

CSS

body {
  display: flex;
  justify-content: center;
  background: #eee;
  font-size: 62.5%;
  //  overflow: hidden;
}

div {
  margin: 10% auto;
}

svg {
  width: 80%;
}

path {
  fill: none;
  stroke: #003370;
  stroke-width: 0.095em;
  /* stroke-dasharray: 50;        
  stroke-dashoffset: 80;  
  animation: draw 5s ease-out both; */
}


/* 
      .st90 {
        fill: none;
        stroke: #8D382D;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
      }
      
      .st91 {
        fill: none;
        stroke: #0E6CFE;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
      }
      
      .st92 {
        fill: none;
        stroke: #BBBDBF;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
      }
      
      .st93 {
        fill: none;
        stroke: #A6A8AB;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
      } */

JavaScript

var path = document.querySelector('path');
var l = path.getTotalLength();

// елемент.animate([массив из кадров], {свойства анимации}
// значения свойства как в element.style.propertyName
var player = path.animate(
  // КАДРЫ АНИМАЦИИ
  [{
    strokeDasharray: l,
    strokeDashoffset: l
  }, {
    strokeDashoffset: 0
  }],

  // СВОЙСТВА АНИМАЦИИ
  {
    duration: 7000,
    //  easing: 'ease-out',
    delay: 10,
    iterations: Infinity,
    //direction: 'alternate',
    fill: 'both'
  });