JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="holder"> 
    <img id="compas" src="https://lh6.googleusercontent.com/-e162uP1NQyY/UOvANWZ167I/AAAAAAAAANM/zc-k8p_C__Q/w497-h373/photo.jpg" width="200" alt="pattern"> 
</div>

CSS

#holder{
     width:200px;
}

JavaScript

$(function() {
    var src = $("#compas").attr("src");
    $("#holder").html("");
    var paper = Raphael($("#holder")[0], 200, 200);

    var image = paper.image(src, 0, 0, 200, 200);
    var angle = 360;
    $("#holder").mouseover(function() {
        image.animate({
            rotation: angle
        }, 1000, ">");
    });
    $("#holder").mouseout(function() {
        image.animate({
            rotation: 0
        }, 1000, ">");
    });
     $("#holder").click(function() {
        image.animate({
            rotation: 360
        }, 1000, ">");
    });
});