Drawing svg cloud

with web Animations api

by schrodingers

HTML

<script src="https://github.com/web-animations/web-animations-js/blob/master/web-animations-next.min.js"></script>
<div>
  <svg>
    <path class="st132" d="M121.964,46.338c-0.038-0.004-0.071-0.022-0.11-0.022c-0.13,0-0.259,0.008-0.389,0.009
		c-0.029,0-0.057-0.002-0.085-0.002c-0.892,0-1.811,0.048-2.743,0.142C113.815,28.483,97.594,16,78.882,16
		c-12.308,0-23.811,5.413-31.671,14.877c-4.487-1.346-9.149-1.774-13.865-1.276C16.434,31.389,3.6,44.465,2.136,61.401
		C0.843,76.349,9.008,90.313,22.6,96.515c0.523,0.239,1.142-0.027,1.345-0.565c0.187-0.495-0.05-1.042-0.532-1.261
		C9.645,88.431,1.75,73.619,4.57,58.304c2.668-14.491,14.481-25.247,29.141-26.73c4.613-0.467,9.171,0.007,13.542,1.41l0.089,0.029
		c0.003,0.001,0.006,0.004,0.009,0.005c9.373,2.89,16.946,9.735,20.779,18.78c0.162,0.381,0.532,0.61,0.921,0.61
		c0.131,0,0.263-0.026,0.391-0.08c0.508-0.216,0.746-0.803,0.53-1.311c-3.88-9.155-11.38-16.175-20.699-19.459
		C56.736,22.93,67.44,18,78.882,18c17.741,0,33.122,11.797,37.768,28.809c-12.253,2.336-21.7,12.763-22.385,25.646
		c-0.029,0.552,0.395,1.022,0.946,1.052c0.018,0.001,0.036,0.001,0.054,0.001c0.527,0,0.97-0.414,0.998-0.947
		c0.697-13.137,11.218-23.522,24.223-24.207c0.159-0.006,0.319-0.014,0.477-0.016c0.167-0.006,0.335-0.01,0.503-0.012
		c14.066,0.046,25.496,11.502,25.496,25.578c0,8.722-4.392,16.761-11.746,21.502c-0.13,0.083-0.256,0.17-0.385,0.258
		c-0.992,0.681-2.228,1.527-8.008,1.527l-60.262,0.049c-0.552,0-0.999,0.448-0.999,1.001c0,0.552,0.448,0.999,1,0.999h0.001
		l60.261-0.049c6.399,0,7.918-1.041,9.138-1.878c0.113-0.077,0.223-0.152,0.337-0.226c7.929-5.112,12.663-13.779,12.663-23.184
		C148.961,58.891,136.903,46.651,121.964,46.338z" />
    <path class="st152" d="M34.781,124.416c-0.553,0-1-0.447-1-1V86.519c0-0.553,0.447-1,1-1s1,0.447,1,1v36.897
		C35.781,123.969,35.334,124.416,34.781,124.416z" />
    <path class="st152" d="M45.705,135.921c-0.553,0-1-0.447-1-1V79.066c0-0.553,0.447-1,1-1s1,0.447,1,1v55.854
		C46.705,135.474,46.258,135.921,45.705,135.921z" />
   ...

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'
  });