JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="canvas"></div> 
    <div><textarea id="code">paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);</textarea></div> 
    <div><button id="run" type="button">Run</button></div> 
    <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>

CSS

#canvas {
    height: 480px;
    margin: 0 auto;
    text-align: left;
    width: 640px;
}

JavaScript

var paper = Raphael("canvas", 640, 480);
var btn = document.getElementById("run");
var cd = document.getElementById("code");

(btn.onclick = function () {
    paper.clear();
    paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
    try {
        (new Function("paper", "window", "document", cd.value)).call(paper, paper);
    } catch (e) {
        alert(e.message || e);
    }
})();