JSFiddle - React, Tailwind, and code Playground

HTML

<div id='test'><font color="#FF0000">y u no animate glow?</font><div>

JavaScript

(function() {
document.body.style.backgroundColor="#000";

var paper = new Raphael(document.getElementById('test'), 500, 500);
    
var green = 0xF;
var stringOut = "#0" + (green << 4).toString(16);

var increment = 5;
var animIncrease = 100;
green -=4;
for(var ctr = 1; ctr < 7 * increment; ctr++)
{
    var i = ctr / increment;
    green-= 1 / increment / .8;
    stringOut = "#0" + (green << 4).toString(16);
    
    var smaller = paper.rect(100+i, 100+i, 50-2*i, 75-2*i, 0);
    smaller.attr( { 
        stroke: stringOut, 
        'stroke-width': 2 })
    
    var bigger = paper.rect(100-i, 100-i, 50+2*i, 75+2*i, 0);
    bigger.attr( { 
        stroke: stringOut, 
        'stroke-width': 2 })
    
    smaller.animate({
        height:100-2*i+animIncrease
    }, 4000)
    bigger.animate({
        height:100+2*i+animIncrease
    }, 4000)
}
    
var baseRect= paper.rect(100, 100, 50, 75, 0);
baseRect.attr( { 
    stroke: "#0f0", 
    'stroke-width': 1  })
    
var glowRect = paper.rect(300, 100, 50, 75, 0);
glowRect.glow({ color: "#0C0", width: 9 });
glowRect.attr( { stroke: '#0F0', 
'stroke-width': 1  })

anim = Raphael.animation({
    height:200
}, 4000);
                
//baseRect.animate(anim);
//glowRect.animate(anim);
}).call(this);