JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="svg-wrapper">


  <svg id="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="277.3px" height="277.2px" viewBox="0 0 277.3 277.2" enable-background="new 0 0 277.3 277.2" xml:space="preserve">
    <circle class="inner-circle" cx="138.6" cy="138.6" r="90" />
    <circle class="outer-circle" stroke-miterlimit="10" cx="138.6" cy="138.6" r="95" />
    <path class="bottom" d="M35.6,209.3c22.5,32.8,60.3,54.2,103.1,54.2 c42.8,0,80.5-21.5,103.1-54.2" />
    <path class="left" d="M133.6,13.6c-66.8,0-120,57.5-120,124.9 c0,22.7,5.2,44.5,16.6,62.3" />
    <path class="right" d="M247,200.9c11.3-17.9,16.6-39.6,16.6-62.3 c0-67.4-53.2-124.9-120-124.9" />
  </svg>
</div>

SCSS

.svg-wrapper {

  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;

  svg {
    overflow: visible;

    circle {
      stroke-dasharray: 596.902604182;
      stroke-dashoffset: 596.902604182;
    }

    path {
      stroke-dasharray:261.799387799;
      stroke-dashoffset: 261.799387799;
    }
  }

}


/* colors */

#circle {

  .inner-circle {
    fill: #212121;
    transform-origin: center center;
  }

  .outer-circle {
    stroke: #212121;
    fill: none;
    stroke-width: 20;
  }

  .bottom,
  .left,
  .right {
    fill: none;
    stroke-width: 20;
    stroke: #212121;
  }
}


/* animations */

#circle {



  .outer-circle {
    animation: path-grow 4.5s ease-in-out forwards  infinite;
  }

  .inner-circle {
    opacity: 0;
    animation: fill-grow 4.5s ease-in-out forwards  infinite;
  }

  .bottom,
  .left,
  .right {
    animation: path-grow 4.5s ease-in-out forwards infinite;
  }
}


@keyframes path-grow {
  20%, 100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-grow {
  20%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}