JSFiddle - React, Tailwind, and code Playground

by polm23

HTML

<div id="petal" onclick="draw"></div>

CSS

#petal {
    width:800px;
    height:800px;
}

JavaScript

function draw() {

    var w = 800;
    var h = 800;

    var r = Raphael("petal", w, h);
    var pet = [
        ["M", (w / 2), 50],
        ["c", (Math.random() * (h / 4)), (Math.random() * (h / 2)), (Math.random() * (h / 4)), (Math.random() * (h / 3)), 0, (h / 2) - 50]
    ];

    function mirror(path) {
        var np = path.slice(0);
        for (var i = 1; i < path.length; i++) {
            //Note we skip the first one
            for (var j = 1; j < path[i].length; j += 2) {
                //Odd-numbered things are X, so we switch them
                np[i][j] = path[i][j] * -1;
            }
        }
        //That's it!
        return np;
    };

    function randcolor() {
        var colors = ["red", "blue", "green", "orange", "purple", "yellow"];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    var cc = randcolor();

    var petnum = (Math.floor(Math.random() * 6) + 1) * 6;

    var line = "none";

    for (var i = 0; i < petnum; i++) {
        r.path(pet).attr({
            "stroke": line,
            "fill": cc,
            "fill-opacity": "0.2"
        }).rotate(i * (360 / petnum), (w / 2), (h / 2));
        r.path(mirror(pet)).attr({
            "stroke": line,
            "fill": cc,
            "fill-opacity": "0.2"
        }).rotate(i * (360 / petnum), (w / 2), (h / 2));
    }
}

draw();
window.onclick = draw;