JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="canvas"></div>

JavaScript

$("document").ready(function() {
    var RM  = Raphael("canvas", 1000, 500);

    var attr = {     // for the visible shapes
        fill: "#bbb",      "fill-opacity": 1,
        stroke: "#222",    "stroke-width": 0.3,
    };
    var attr2 = {    // for the invisible hovering areas
        fill: "green",     "fill-opacity": 0.0,
        stroke: "red",     "stroke-width": 0,
    };
    var things = {};
    /* Square */    things.square     = [ RM.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),
                                          RM.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];
    /* Triangle */  things.triangle   = [ RM.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),
                                          RM.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];

    things.square[1].node.setAttribute("id","clicker");
    $("#clicker").click(function(){
        alert("test");
    });

}); // end the document ready function