JSFiddle - React, Tailwind, and code Playground

HTML

<div id="title"></div>
<div id="title2"></div>
<input type="button" name="test" onClick="buildLogo()" value="Build Logo" />
<input type="button" name="test" onClick="buildLogoAnimated()" value="Build Logo Animated" />

CSS

body {
    background-color: #000;
}

JavaScript

buildLogo = function () {
    var logo = Raphael("title",800,236);

    var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"});

    var starSpin = function () {
        logoStar.animate({rotation: "360"}, 5000, starSpin);
    }
    starSpin();
}


buildLogoAnimated = function () {
    document.getElementById("title2").innerHTML = "";
    
    var logo = Raphael("title2",800,236);

    var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"});

    function starSpin() {
        logoStar.animate({rotation: "360"}, 5000, buildLogoAnimated);
    }
    starSpin();
}