JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/52bff469f60988f1391e8b3d7cb5349163df8ba1/raphael-min.js"></script>
<div id="paper"></div>

CSS

#paper {
position: relative;        
    margin: 10%;
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,0.2);
}

JavaScript

var d, paper;
var lines = [];

var path = function(p1, p2) {
    return "M" + p1.join(" ") + "L" + p2.join(" ");
}

var draw = function(points) {
    var attrs = {  
        stroke: '#fff',
        'stroke-opacity' : 0.6,
        'stroke-width': 2
    }
    for (var i = 0; i < points.length; i++) {
        var p = path(points[i][0], points[i][1]);
        if (lines.length >= i && lines[i] && lines[i].line) {
            var a = attrs;
            a["path"] = p;
            lines[i].animate(a, 400);
        } else {
            lines[i] = paper.path(path).attr(attrs);
        }
console.log(lines[i]);        
    }
}
        
var setup = function() {
        console.log('hello');
d = $('#paper');
paper = Raphael(d.get(0), d.width(), d.height());
}

var testplot = [
            [[10,10], [50,50]],
            [[60,70], [150,150]],
            [[10,80], [130,150]],
            [[100,10], [300,250]]
];

$('document').ready(function() {
        console.log('hello');
    setup();
    draw(testplot);
});