JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<script src="https://wzrd.in/standalone/ff-svg-path-pushstate-workaround@latest"></script>
<div id="buttons">
    <ol>
        <li><button id="hide">Hide the Shape</button></li>
        <li><button id="history">Change the URL via History API</button></li>
        <li><button id="show">Show the Shape</button></li>
    </ol>
</div>

<div id="paper"></div>

CSS

#buttons {
    float: left;
}
button {
    display: block;
    margin: 2em;
}
#paper {
    height: 202px;
    overflow: hidden;
    width: 202px;
}

JavaScript

var paper = Raphael("paper", 202, 202),
    el = $("#paper"),
    c = paper.circle(101, 101, 100);

c.attr("fill", "url(http://placekitten.com/g/200/300)");

$("#hide").click(function (e) {
    c.hide();
});

$("#history").click(function (e) {
    window.history.pushState(null, "", "new-state");
    ffSvgPathPushstateWorkaround()
});

$("#show").click(function (e) {
    c.show();
});