svg update

HTML

<svg width="100%" height="100%" viewBox="0 0 160 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="layer1" d="M0.844,47.238l0,-6.021c0.1,-0.383 0.253,-0.762 0.292,-1.153c1.081,-10.74 5.632,-19.886 13.841,-27.083c10.721,-9.402 23.3,-13.246 37.568,-10.215c9.484,2.014 16.971,7.476 23.383,14.4c1.4,1.513 2.678,3.135 4.099,4.808c0.407,-0.493 0.73,-0.93 1.095,-1.332c2.089,-2.283 4.024,-4.723 6.305,-6.804c10.039,-9.169 21.626,-13.823 35.654,-11.468c16.985,2.853 31.043,15.686 34.823,32.074c0.519,2.236 0.839,4.516 1.252,6.773l0,6.021c-0.1,0.385 -0.256,0.764 -0.291,1.153c-0.531,6.817 -2.441,13.285 -5.256,19.516c-5.558,12.296 -13.916,22.677 -23.46,32.212c-14.718,14.701 -31.62,26.726 -49.261,37.839c-0.772,0.485 -1.257,0.308 -1.911,-0.102c-11.924,-7.465 -23.478,-15.425 -34.31,-24.342c-11.129,-9.164 -21.419,-19.104 -29.736,-30.837c-5.836,-8.232 -10.443,-17.03 -12.649,-26.874c-0.631,-2.821 -0.967,-5.709 -1.438,-8.565" /><path id="layer2" d="M11.283,50.24l0,-5.227c0.087,-0.333 0.22,-0.662 0.254,-1.001c0.938,-9.324 4.889,-17.263 12.015,-23.511c9.308,-8.162 20.227,-11.499 32.614,-8.868c8.233,1.749 14.733,6.49 20.299,12.501c1.216,1.313 2.325,2.722 3.558,4.174c0.353,-0.428 0.634,-0.808 0.951,-1.156c1.813,-1.982 3.493,-4.101 5.473,-5.908c8.716,-7.959 18.774,-11.999 30.953,-9.954c14.744,2.476 26.948,13.617 30.23,27.843c0.45,1.941 0.728,3.921 1.087,5.88l0,5.227c-0.087,0.334 -0.223,0.663 -0.253,1.001c-0.461,5.917 -2.119,11.533 -4.563,16.942c-4.824,10.675 -12.08,19.686 -20.366,27.964c-12.777,12.762 -27.449,23.201 -42.765,32.848c-0.67,0.422 -1.09,0.268 -1.658,-0.088c-10.352,-6.481 -20.381,-13.391 -29.785,-21.132c-9.661,-7.955 -18.594,-16.584 -25.815,-26.77c-5.065,-7.146 -9.065,-14.784 -10.98,-23.33c-0.548,-2.449 -0.84,-4.956 -1.249,-7.435" /></svg>

CSS

svg {
  height:100vh;
}
path#layer1 {
  fill:red;
  fill-opacity:0.5;
  transform-origin: 0 0;
  animation: animateOuter 5s 1.3s ease infinite;
}
path#layer2 {
  fill:grey;
  animation: animateInner 5s 1.5s ease infinite;
}
path#layer2:hover {
  /*fill:red;*/
}

@keyframes animateOuter {
  10% {
    transform: scale(1.1);
  }
  45% {
    transform: scale(1.2);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}


@keyframes animateInner {
   10% {
    transform: scale(1.1);
    fill: grey;
  }
  45% {
    transform: scale(1.2);
    fill: red;
  }
  90% {
    transform: scale(1.1);
    fill: red;
  }
  100% {
    transform: scale(1.0);
    fill: grey;
  }
}