CodePen Embed - line chart

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" width="300" height="200" version="1.1" style="border: 1px solid #000;"><rect x="0" y="0" width="900" height="600" fill="#fff"/>
  <path class="line" d="M0 482L25 500C50 518 100 554 150 519.7C200 485.3 250 380.7 300 371.2C350 361.7 400 447.3 450 466.7C500 486 550 439 600 436.2C650 433.3 700 474.7 750 457.2C800 439.7 850 363.3 875 325.2L900 287" fill="none" stroke-linecap="round" stroke-linejoin="miter" stroke="#000" stroke-width="18"/>
</svg>

.line {
     stroke-dasharray: 1100; 
     stroke-dashoffset: 0;
     animation: dash 3s linear alternate;
    }

 @keyframes dash {
   0% { stroke-dashoffset: 1100; }
   100% { stroke-dashoffset: 0; }
 }

This Pen is owned by awe27@naver.com on CodePen.

See more by @jjunglog on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.