JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 

<section>
    <header><h1>SVG:</h1></header>
    <div id='svg-container'>
     
        
    </div>
</section>
<section>
    <header><h1>Canvas:</h1></header>
<canvas id="svg-canvas"></canvas>
</section>
<section>
    <header><h1>PNG:</h1></header>
<img id="svg-img" />
</section>

JavaScript

var svg = d3.select("#svg-container")
            .append("svg")
            .attr("width", 400)
            .attr("height", 300);

var line = d3.svg.line()
    .x(function(d) {return Math.random() * 400; }) 
        .y(function(d) { return Math.random() * 300; });

var array = [1,2,3,4,5,6];
svg.selectAll("path")
        .data(array).enter()
        .append("path")
    .attr("d", function() { return line(array) }) // replacing line with M0,0l100,100 draws a line 
            .attr("class", "line")
            .style("stroke", "black" )
            .attr('fill', 'none');


var svg = document.getElementById("svg-container").innerHTML.trim();
var canvas = document.getElementById('svg-canvas');
canvg(canvas, svg, { renderCallback: function () {
  var img = canvas.toDataURL("image/png");
  document.write('<img src="'+img+'"/>');
}
});