JSFiddle - React, Tailwind, and code Playground

by isochronous

HTML

<div id="container" style="width: 128px; height: 128px;" class="animated">
    <svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 144.14009 161.16119" preserveAspectRatio="xMidYMid meet">
        <!-- going clockwise from bottom-left -->
        <g id="dots">
            <path id="left-bottom-gray" class="dot gray" d="M58.836 99.045a7.674 7.674 0 0 1-7.675 7.675 7.674 7.674 0 0 1-7.675-7.675 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.675 7.675"></path>
            <path id="left-center-yellow" class="dot" fill="#ffc500" d="M58.836 73.951a7.674 7.674 0 0 1-7.675 7.675 7.674 7.674 0 0 1-7.675-7.675 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.675 7.675"></path>
            <path id="left-top-orange" class="dot" fill="#ff8b08" d="M58.836 48.858a7.674 7.674 0 0 1-7.675 7.675 7.674 7.674 0 0 1-7.675-7.675 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.675 7.675"></path>
            <path id="center-top-red" class="dot" fill="#ea4804" d="M79.292 61.405a7.674 7.674 0 0 1-7.675 7.674 7.674 7.674 0 0 1-7.675-7.674 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.675 7.675"></path>
            <path id="right-center-yellow" class="dot" fill="#ffc500" d="M97.307 73.951a7.674 7.674 0 0 1-7.674 7.675 7.674 7.674 0 0 1-7.675-7.675 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.674 7.675"></path>
            <path id="center-bottom-orange" class="dot" fill="#ff8b08" d="M79.292 86.498a7.674 7.674 0 0 1-7.675 7.675 7.674 7.674 0 0 1-7.675-7.675 7.674 7.674 0 0 1 7.675-7.675 7.674 7.674 0 0 1 7.675 7.675"></path>
        </g>
        <path fill="none" stroke="#ea4804" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="13.7060579" d="M119.002 48.707c9.424 20 18.285 40.362 18.285 40.362l-14.672 3.858s15.555 36.084 6.207 44.62c-9.349 8.536-23.213 12.993-60.63-3.59"></path>
        <path fill="none" class="gray" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="13.7060579" d="M22.49 22.163C36.415 9.205 58.475...

SCSS

#container {
    position: relative;
    display: inline-block;
    //height: 100%;
    //background-color: red;
}

svg {
    width:100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

@keyframes pulse {
0% { opacity: 0.2; }
20% { opacity: 1; }
100% { opacity: 0.2; }
}

.animated .dot
{
    animation-name: pulse;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.dot.gray {
    fill: var(--logo-head-color, #4a4b55);
}

path.gray {
    stroke: var(--logo-head-color, #4a4b55);
}

#left-center-yellow {
    animation-delay: 0.2s;
}

#left-top-orange {
    animation-delay: 0.4s;
}

#center-top-red {
    animation-delay: 0.6s;
}

#right-center-yellow {
    animation-delay: 0.8s;
}

#center-bottom-orange {
    animation-delay: 1s;
}