JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<svg width="400px" height="100%" viewBox="0 0 400 400"
     class="line-chart" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0,0" />
</svg>

SCSS

.line-chart {
    border: 1px solid #ddd;

    path {
        fill: none;
        stroke: black;
        stroke-width: 1px;
    }
}

JavaScript

var path = document.querySelector('.line-chart path'),
    h = 400;

setInterval(function(){
   
    console.time('path');
    path.attributes['d'].value = 
        "M 0,0 L 20,"+
        ( ( Math.random()*h ) | 0 )+
        " 60,"+
        ( ( Math.random()*h ) | 0 )+
        " 100,"+
        ( ( Math.random()*h ) | 0 )+
        " 150,"+
        ( ( Math.random()*h ) | 0 )+
        " 200,"+
        ( ( Math.random()*h ) | 0 )+
        " 250,"+
        ( ( Math.random()*h ) | 0 )+
        " 300,"+
        ( ( Math.random()*h ) | 0 )+
        " 330,"+
        ( ( Math.random()*h ) | 0 )+
        " 360,"+
        ( ( Math.random()*h ) | 0 );
    console.timeEnd('path');    
    path.attributes['stroke'].value = "green";
    
}, 500);