JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

JavaScript

var paper = Raphael(0, 0, 500, 500);

var colors = paper.set();

for (var c = 0; c < 17; c += 1) {
    for (var i = 0; i < 3; i += 1) {
        colors.push(paper.rect(10 + c * 20, 10 + i * 20, 20, 20)
            .attr({
                fill: Raphael.hsl(c / 16, 1, (i+1)/4),
                stroke: "#CCC"
            })
        );
    }
}

var selected_color = "red";

var selected_color_box = paper.rect(10 + 17 * 20, 10, 60, 60).attr({
    fill: "red",
    stroke: "#CCC"    
});

colors.click(function() {
    selected_color = this.attr("fill");
    colors.attr("stroke", "#CCC");
    this.attr("stroke", "#000").attr("stroke-width", 2).toFront();
    selected_color_box.attr("fill", selected_color);
    
});

function person(rsr) { rsr.setStart();

var group_a = rsr.set(); group_a.attr({'name': 'group_a'}); var group_b = rsr.set(); group_b.attr({'parent': 'group_a','name': 'group_b'}); var Layer_1 = rsr.set(); Layer_1.attr({'id': 'Layer_1','parent': 'group_a','name': 'Layer_1'}); var group_c = rsr.set(); var path_d = rsr.path(" M42.897,111.634c-0.556,0-0.152,2.222,1.211,6.869c1.263,4.697,4.849,13.889,6.869,20.555c2.02,6.313,3.485,12.223,4.95,17.728 l27.171-0.707c-0.1-9.344-0.505-17.374-1.414-24.091c-1.01-6.818-3.333-12.121-4.04-16.313 c-0.809-4.141-1.111-7.121-0.708-8.737C65.624,108.503,54.26,110.069,42.897,111.634z"); path_d.attr({"clip-rule": 'evenodd',"fill-rule": 'evenodd',stroke: '#000000',"stroke-miterlimit": '10',"stroke-width": '0.04',parent: 'group_a','stroke-opacity': '1','fill': '#000000'}).data('id', 'path_d'); var path_e = rsr.path(" M44.108,112.847c-0.606-0.05-0.151,2.222,1.162,6.818c1.262,4.697,4.849,13.889,6.869,20.555 c2.02,6.313,3.485,12.223,4.949,17.728l27.172-0.708c-1.365-8.787-2.627-16.211-3.789-22.676 c-1.363-6.616-2.676-11.97-3.536-16.061c-0.858-4.141-1.464-6.919-1.616-8.535C64.917,110.927,54.513,111.887,44.108,112.847z"); path_e.attr({"clip-rule": 'evenodd',fill: '#FFC080',"fill-rule": 'evenodd',stroke: '#000000',"stroke-miterlimit":...