JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

JavaScript

// raphael setup
var paper = Raphael(0, 0, 400, 400);

// setup your circle
var circle = paper.circle(100, 100, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#000");

// assign an id to the svn node
circle.node.id = 'myId';
// pin a reference to the raphael object on the svg node
$(circle.node).data('raphael',circle);


// access the node through jQuery
$('#myId')
    // access the raphael object
    .data('raphael')
    // animate it's props
    .animate({
        fill : 'green',
        r : 100,
        stroke : 'rgba(100,100,100,0.1)',
        'stroke-width' : 10
    },1000);

// here's a fancy & unnecesary plugin that annimates the svg through jquery 

var oldAnimate = $.fn.animate;
$.fn.animate = function(){
    var args = arguments;
    return this.each(function(i,el){
        var $el = $(el),
            raphael = $el.data('raphael');
        if(raphael)
            raphael.animate.apply(raphael,args);
        else
            oldAnimate.apply($el,args);
    });
};

// and now you can animate your object with the jquery animate method (let's delay it a bit) : 
setTimeout(function(){
    $('#myId')
        .animate({
            fill : 'blue',
            r : 10,
            stroke : '#f90',
            'stroke-width' : 30
        },1000,function(){
           alert('the "jQuery" animation has ended');
        });
},1000);