JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- <svg viewBox="0 0 150 150">
<g>

<circle class="st2" cx="75.0000076" cy="74.9999466" stroke-linecap="round" r="51.6761017"/>
<circle class="st3" cx="75.0000076" cy="74.9999466" stroke-linecap="round" r="51.6761017"/>
<path class="st4" d="M75,112.9313507c0,0,37.2112961-19.0730972,37.2112961-43.7558975   c0-10.946804-8.8742981-19.821003-19.8210983-19.821003c-7.4992981,0-14.0230789,4.1666985-17.3901978,10.3095016   c-3.3671036-6.1428032-9.8908005-10.3095016-17.3901978-10.3095016c-10.9468002,0-19.821003,8.8741989-19.821003,19.821003   C37.7887993,93.8582535,75,112.9313507,75,112.9313507z"/>
</g>
</svg> -->

<svg width="99px" height="146px" viewBox="0 -10 99 156">
    <g>
        <path stroke-linecap="round" stroke-linejoin="round" class="st2" d="M59.9,131.6 C25.52,131.6 4.28,111.44 4.28,69.86 L4.28,65.36 C4.28,20.9 30.2,4.16 62.24,4.16 C75.92,4.16 85.64,6.5 93.2,10.64 L93.2,27.92 C83.66,24.14 75.2,22.16 63.86,22.16 C42.44,22.16 28.22,33.68 28.22,63.02 L28.22,69.32 C28.22,97.58 38.12,113.6 64.04,113.6 C78.08,113.6 87.08,110 94.46,106.94 L94.46,124.04 C86,128.54 74.66,131.6 59.9,131.6 Z"></path>
<path stroke-linecap="round" stroke-linejoin="round" class="st3" d="M59.9,131.6 C25.52,131.6 4.28,111.44 4.28,69.86 L4.28,65.36 C4.28,20.9 30.2,4.16 62.24,4.16 C75.92,4.16 85.64,6.5 93.2,10.64 L93.2,27.92 C83.66,24.14 75.2,22.16 63.86,22.16 C42.44,22.16 28.22,33.68 28.22,63.02 L28.22,69.32 C28.22,97.58 38.12,113.6 64.04,113.6 C78.08,113.6 87.08,110 94.46,106.94 L94.46,124.04 C86,128.54 74.66,131.6 59.9,131.6 Z"></path>
    </g>
</svg>

CSS

svg {
  position: absolute;
  top: 5%;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 80%;
  
}
path,
circle {
  stroke-width: 10px;
  
  fill: none;
}
.st2 {
  stroke: #000;
  stroke-dasharray: 80 20;
  animation: st01 20s 0.3s infinite ease-in;
}
.st3 {
  stroke-width: 4px;
  stroke: #fff;
  stroke-dasharray: 80 20;
  animation: st02 20s 0.3s infinite ease-in;
}
@keyframes st01 {
  50% {
    stroke-dasharray: 110 20;
  }
  100% {
    stroke-dasharray: 80 20;
    stroke-dashoffset: 1000;
  }
}
@keyframes st02 {
  50% {
    stroke-dasharray: 110 20;
  }
  100% {
    stroke-dasharray: 80 20;
    stroke-dashoffset: 1000;
  }
}