svg {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
svg .draw-arrow {
  stroke-width: 5;
  stroke: red;
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: draw;
          animation-name: draw;
}
svg .draw-arrow.tail-1 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
svg .draw-arrow.tail-2 {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

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

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
body {
  padding: 20px;
  text-align: center;
  background-color: #fff;
}