JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<div style="padding-left:20px">


<svg id="ct-logo" width="70px" height="100px"  viewBox="10 25 100 153">
  <circle id="main" class="progress-ring__circle" stroke="white" fill="transparent" r="52" cx="60" cy="60" style="stroke-dasharray: 375.726, 61.726;stroke-dashoffset: .33;stroke: #ffffff;stroke-width: 100px;fill: #d83024;cx: 83;cy: 88;transform: rotate(15deg);transition: all 2s;"></circle>

    
    <circle id="leftwing" stroke="white" stroke-width="4" fill="transparent" r="44" cx="60" cy="60" style="stroke-dasharray: 274.726, 379.726;stroke-dashoffset: 275.372;stroke: #cd3434;r: 44px;stroke-width: 17px;cx: 109px;cy: 49px;transform: rotate(37deg);transition: all 2s;"></circle>
    
    <circle id="rightwing" stroke="white" stroke-width="4" fill="transparent" r="42" cx="60" cy="60" style="stroke-dasharray: 286.726, 275.726;stroke-dashoffset: 287.372;stroke: #cd3434;r: 42px;stroke-width: 17px;cx: -69;cy: -97;transform: rotate(187deg);transition: all 2s;"></circle>
</svg>

<svg  width="300px" height="100px"  viewBox="0 0 192 48">
<defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-logo_full);
      }

      .cls-2 {
        fill: #080807;
      }

      .cls-3 {
        fill: #d22630;
        fill-rule: evenodd;
      }
    </style>
    <clipPath id="clip-logo_full">
      <rect width="192" height="48"/>
    </clipPath>
  </defs>
  <g id="logo_full" class="cls-1">
    <g id="logotextfull" data-name="Group 2646" transform="translate(-180 66)">
  
  <path id="Path_563" data-name="Path 563" class="cls-2"...

CSS

.bringDot{
  stroke-width: 64px !important;
}
.dotFinal{
  stroke-dashoffset: 77.33 !important;
}
#leftwing,#rightwing{
  display:none;
}
.leftwing{
  stroke-dashoffset: 180.372 !important;
}
.rightwing{
  stroke-dashoffset: 188.372 !important;
}
#logotextfull{
    transition: all 2s;
}
#ct-logo{
  transform: rotate(90deg);
  transition: all 2s;
}
.ct-logo{
  transform: rotate(0deg) !important;
  
}

JavaScript

$("#clickme").click(function(){
console.log("called");
document.getElementById("main").setAttribute("class", "bringDot");
window.setTimeout(function(){
document.getElementById("main").setAttribute("class", "dotFinal bringDot");

window.setTimeout(function(){
document.getElementById("leftwing").style.display="block";
document.getElementById("rightwing").style.display="block";

},1900)


window.setTimeout(function(){
document.getElementById("leftwing").style.display="block";
document.getElementById("rightwing").setAttribute("class", "rightwing");
document.getElementById("leftwing").setAttribute("class", "leftwing");
window.setTimeout(function(){
document.getElementById("ct-logo").setAttribute("class", "ct-logo");



window.setTimeout(function(){

document.getElementById("logotextfull").setAttribute("transform", "translate(-30 66)");

},1700);


},2000);
},3000)

},1000);
});