JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<link rel="stylesheet" href="https://fast.fonts.com/cssapi/8127d514-91f8-450d-b62a-47448b2957f5.css">
<div id="svg-container">
<div id="svg">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" width="1em" height="1em" viewBox="200 -345 200 200">
       <g transform="scale(1 -1)">
        <path d="M 249.189,164.4 C 244.867,165.144 243.01,164.98 239.468,167.569 C 236.787,169.524 231.959,172.755 230.439,177.15 C 229.615,179.52 228.576,181.022 227.439,184.65 C 226.438,187.846 223.955,204.753 223.548,208.301 C 222.394,218.297 222.159,228.838 222.203,239.364 C 222.297,262.652 223.407,286.061 230.406,306.018 C 234.394,317.391 241.076,325.998 254.166,327.243 C 267.399,328.497 279.728,324.466 290.752,320.353 C 313.981,311.678 336.657,300.193 355.135,282.129 C 367.202,270.325 378.525,254.941 375.329,236.525 C 372.016,217.444 352.814,203.874 337.814,193.734 C 312.168,176.4 283.797,162.396 249.191,164.4 Z" />
       </g>
    </svg>
</div>
</div>

SCSS

.svg-container{
    position: relative;
    margin-left: 100px;
    h1{
        font-family: 'Arial Rounded MT', 'Arial W02 Rounded Light', Arial, Helvetica, sans-serif;
        position: absolute;
        left: 16px;
        top: 16px;
        font-size: 22px;
        color: white;
        opacity: 0;
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
    }
}
.svg {
    font-size: 90px;
    position: absolute;
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transition: all 1.5s;
    -webkit-transition: all 1.5s;
    opacity: 0;
    &.s1{
        fill: #FADC49;
    }
    &.s2{
        fill: #78B86E;
    }
    &.s3{
        fill: #00AAE9;
    }
    &.s4{
        fill: #231F1F;
    }
}

JavaScript

var svg = document.getElementById('svg');
var svgContainer = document.getElementById('svg-container');

window.svgs = [svg.lastChild.cloneNode(true), svg.lastChild.cloneNode(true), svg.lastChild.cloneNode(true), svg.lastChild.cloneNode(true)];

svg.parentNode.removeChild(svg);

for(var i = 0; i < svgs.length; i++){
    svgs[i].className += " s"+(i+1);
    if(i == 3){
        svgs[i].style.opacity = 1;
    }else{
        svgs[i].style.margin.left = '-100px';
    }
    svgContainer.appendChild(svgs[i]);
}
svgContainer.innerHTML += "<h1>dpas</h1>";

var i = 4;
var _AddSVG = function(){
    svgs[i].style.margin.left = (4 * (4-i))+'px';
    svgs[i].style.opacity = 1;
    svgs[i].style.transform = 'rotate(0deg)';
    svgs[i].style['-webkit-transform'] = 'rotate(0deg)';

    i--;
    if(i > 0){
        setTimeout(_AddSVG, 500);
    }
}
_AddSVG();

setTimeout(function(){
    svgContainer.children()[4].style.opacity = 1;
}, 3000);