@charset "utf-8";
/* CSS Document */


svg {
  fill-opacity: 0;
}
 …
 <path pathLength="1" d="M110.57 … >
 …
svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it won't start until our drawing is finished
  animation: fadeOpacity 2s forwards 2s;
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}
svg {
  width: 40%;
  fill-opacity: 0;
  animation: fadeOpacity 2s forwards 2s;
}

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}