JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<div id="container"></div>

CSS

div#container {
    width: 320px; 
    height: 200px; 
    border: 1px solid black; 
    
}

JavaScript

var paper = Raphael("container"); 

var c = paper.circle(20, 20, 10); 
c.attr({fill: '#f00'});
c.node.onclick = function(){ c.animate({cx: 300 }, 2000, 'bounce', function(){
    c.animate({cy: 180}, 2000, 'bounce');
}); 
                   };


function HLine(x, y, w){
    var l = paper.path(['M', x, y, 'L', x + w, y].join(' ')); 
    return l; 
}

function VLine(x, y, h){
    var l = paper.path(['M', x, y, 'L', x, y + h].join(' ')); 
}

var l = HLine(10, 10, 100);

VLine(10, 10, 100);