JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg width="394.298px" height="394.297px" viewBox="3.35 3.351 394.298 394.297">
<path fill="none" stroke="#ffffff" stroke-width="7" d="M345.737,6.851H55.263
	C28.526,6.851,6.85,28.526,6.85,55.264v290.472c0,26.738,21.675,48.412,48.413,48.412h290.473c26.736,0,48.412-21.674,48.412-48.412
	V55.263C394.149,28.526,372.473,6.851,345.737,6.851z"/>
<path class="sp-circle01" class="path" fill="none" stroke="#000000" stroke-width="7"  d="M345.737,6.851H55.263
	C28.526,6.851,6.85,28.526,6.85,55.264v290.472c0,26.738,21.675,48.412,48.413,48.412h290.473c26.736,0,48.412-21.674,48.412-48.412
	V55.263C394.149,28.526,372.473,6.851,345.737,6.851z" />
<path id="mz" fill="none" stroke="#ffffff" stroke-width="6" d="M180.781,132.555h19.357v144.611h-20.807V164.645
	l-44.46,55.898h-3.83l-44.978-55.898v112.521H65.361V132.555h19.6l48.052,59.392L180.781,132.555z M223.844,132.348h124.633
	L256.094,258.74h92.383v18.426H217.944l92.512-126.393h-86.611V132.348z"/>	  
<path class="sp-circle01" fill="none" stroke="#000000" stroke-width="6" d="M180.781,132.555h19.357v144.611h-20.807V164.645
	l-44.46,55.898h-3.83l-44.978-55.898v112.521H65.361V132.555h19.6l48.052,59.392L180.781,132.555z M223.844,132.348h124.633
	L256.094,258.74h92.383v18.426H217.944l92.512-126.393h-86.611V132.348z"/>	
</svg>

CSS

body {
  background:#bc0d14;
}
svg {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
}
.sp-circle01 {
  animation: sp-circle01 3s linear;
  animation-iteration-count: infinite;
  stroke-dasharray: 147;
}
@keyframes sp-circle01 {
  to {
    stroke-dashoffset: 292; 
  }
}

JavaScript

var path = document.querySelector('.path');
var length = path.getTotalLength();
console.log(length);