JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="graph__wrapper">
  <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
    <g  id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <path id="Path-1" class="path" fill="none" stroke="#ccc" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M2.49,50.39S4.23,34.05,16.43,28.16c18.18-9.39,22-11.66,13.22-26.91"/>

      
<path class="dashed" fill="none" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="M2.49,50.39S4.23,34.05,16.43,28.16c18.18-9.39,22-11.66,13.22-26.91"/>
      
      <polyline id="arrow" points="0,-9 18,0 0,9 5,0" fill="#db5862">
        <animateMotion rotate="auto" begin="0.5s" dur="0.6s" repeatCount="1" fill="freeze">
          <mpath xlink:href="#Path-1" />
        </animateMotion>
      </polyline>

    </g>
  </svg>
</div>

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 0.6s linear forwards;
  animation-iteration-count: 1;
  animation-delay: 0s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.dashed {
  stroke-dasharray: 5,12;
}

#arrow {
  animation: arrow 0.6s linear forwards;
  opacity:0;
}


@keyframes arrow {
  to {
    opacity: 1;
  }
}

.ifrm {
  border:none;
  width:100%;
  margin-top:50px;
}