JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

HTML

<div id="canvas"></div>

CSS

#canvas {
    width: 100%;
    height: 300px;
    border: 1px solid #CCC;
}

JavaScript

var paper = Raphael("canvas");

var original_width = -1;

for (var c = 0; c < 50; c += 1) {
    paper.circle(500 * Math.random(), 250 * Math.random(), 3 + 30 * Math.random()).attr({
        fill: "hsl(" + Math.random() + ",0.5,0.5)",
        opacity: Math.random()
    });
}

paper.setViewBox(0, 0, 500, 250);

function resize() {
    var w = document.getElementById("canvas").offsetWidth;
    
    if (original_width === -1) {
        original_width = w;    
    }
    
    zoom = w / original_width;
    
    paper.setSize(500 * zoom, 200 * zoom);
}

window.onresize = function() {
    resize();    
}

//resize();