JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg width="100px" height="30px" viewBox="0 0 100 30">
    <g id="M_5-Contact">
 <path class="frame" stroke="#000000" fill="none" stroke-width="9" vector-effect="non-scaling-stroke" d="M99.2,29.3H0.8V0.8h98.5V29.3z"/>
	<polygon class="st0 txt_x1"  points="16.7,20.8 26.2,10.1 23.5,10.1 14,20.8 	"/>
	<polygon class="st0 txt_x2" points="21.9,16 20.1,14 16.7,10.1 14.1,10.1 18.8,15.4 20.6,17.5 23.5,20.8 26.1,20.8 	"/>
	<path class="st0 txt_p" d="M38.2,10.3h-4.3v10.2h2v-8.5h2.3c1,0,1.8,0.5,1.8,1.4c0,0.9-0.7,1.4-1.8,1.4h-1.7v1.7h1.6
		c2.2,0,3.7-1.3,3.7-3.2S40.3,10.3,38.2,10.3"/>
	<polygon class="st0 txt_l" points="45,10 45,21 52,21 52,19.3 47,19.3 47,10 	"/>
	<polygon class="st0 txt_e" points="63,11.9 63,10 56,10 56,21 63,21 63,19.3 58,19.3 58,16.2 62.1,16.2 62.1,14.6 58,14.6 58,11.9 	"/>
	<polygon class="st0 txt_a" points="70.2,10 71.8,10 76,21 73.9,21 73.1,19 72.5,17.1 71.8,14.9 71.8,14.9 70.9,12.6 69.3,17.1 71.8,17.1 
		72.5,19 68.8,19 68.2,21 66,21 	"/>
	<path class="st0 txt_t" d="M83.5,21v-9.1H86V10h-7v1.9h2.7V21H83.5z"/>
	</g>
</svg>

CSS

svg {
   width: 90%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 5%;
}
.frame  {
  stroke: #ffffff;
  animation-name: ani-frame;
  animation-delay: .3s;
  animation-duration: 2s;
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
/* .frame {
  animation-name: ani-line;
  animation-delay: 5.5s;
  animation-duration: 2s;
  stroke-dasharray: 200;
  stroke-dashoffset: 200; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
} */

.st0 {
  opacity: 0;
  
  animation-name: ani-pleat;
  
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  transform:translateX(5px);
  transform-origin:0 0;
}
.txt_x1 {animation-delay: 2s;}
.txt_x2 {animation-delay: 2.2s;}
.txt_p {animation-delay: 2s;}
.txt_l {animation-delay: 2.2s;}
.txt_e {animation-delay: 2.4s;}
.txt_a {animation-delay: 2.6s;}
.txt_t {animation-delay: 2.8s;}
.txt_x01,
.txt_x02 {
  animation-name: ani-x;
  
  animation-duration: 1s;
  stroke-dasharray: 200;
  stroke-dashoffset: 200; 
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
.txt_x01 {animation-delay: 5.8s;}
.txt_x02 {animation-delay: 6s;}

@keyframes ani-frame {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes ani-pleat {
  20% {
    stroke: #000000;
  }
  100% {
    stroke: #000000;
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes ani-line {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes ani-x {
  100% {
    stroke-dashoffset: 0; 
  }
}