JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg width="100px" height="30px" viewBox="0 0 100 30">
    <defs>
    <mask id="logo">
<path class="txt_x02" stroke="#ffffff" stroke-width="3" d="M14.5,9.1l11.3,12.7"/>
	<path class="txt_x01" stroke="#ffffff" stroke-width="3" d="M25.8,9.1L14.5,21.9"/>
	<path class="st1 txt_p" stroke="#ffffff" stroke-width="3" d="M34.914,10.3v10.2"/>
  <path class="st1 txt_p02" stroke="#ffffff" stroke-width="3" d="M35.87,11.146h3.191   c1.666,0.339,1.847,1.958,1.847,1.958c0,1.959-1.807,2.492-1.807,2.492L36.5,15.638"/>
	<path class="st1 txt_l" stroke="#ffffff" stroke-width="3" d="M46,10.002v10.122h6.03"/>
	<path class="st1 txt_e01" stroke="#ffffff" stroke-width="3" d="M56,11h7"/>
	<path class="st1 txt_e02" stroke="#ffffff" stroke-width="3" d="M63,20.25h-6v-4.258v-4.076"/>
  <path class="st1 txt_e03" stroke="#ffffff" stroke-width="3" d="M57.935,15.4H62.1"/>
	<path class="st1 txt_a01" stroke="#ffffff" stroke-width="3" d="M66.8,21.8L71,10.3l4.2,11.4"/>
	<path class="st1 txt_a02" stroke="#ffffff" stroke-width="3" d="M68.6,18h3.9"/>
	<path class="st1 txt_a02" stroke="#ffffff" stroke-width="3" d="M79,11h7"/>
	<path class="st1 txt_t01" stroke="#ffffff" stroke-width="3" d="M82.5,11.5V21"/>
	<!-- <path class="frame" stroke="#ffffff" fill="none" stroke-width="3" d="M99.2,29.3H0.8V0.8h98.5V29.3z"/> -->
    </mask>
    </defs>
    
    <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"/>
 <path class="line" fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M33.865-1.983L4.887,33.176"/>
	<polygon mask="url('#logo')" class="st0" points="16.7,20.8 26.2,10.1 23.5,10.1 14,20.8 	"/>
	<polygon mask="url('#logo')" class="st0" 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 mask="url('#logo')" class="st0"...

CSS

svg {
   width: 90%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 5%;
}
.frame  {
  animation-name: ani-frame;
  animation-delay: .3s;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}
.line {
  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;
}

.st1 {
  animation-name: ani-pleat;
  
  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;
}
.txt_p {animation-delay: 2s;}
.txt_p02 {animation-delay: 2.3s;}
.txt_l {animation-delay: 2.5s;}
.txt_e01 {animation-delay: 3s;}
.txt_e02 {animation-delay: 3.2s;}
.txt_e03 {animation-delay: 3.5s;}
.txt_a01 {animation-delay: 4s;}
.txt_a02 {animation-delay: 4.5s;}
.txt_t01 {animation-delay: 5s;animation-duration: .2s;}
.txt_t02 {animation-delay: 5.2s;}
.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 {
  0% {
    transform: scaleX(.3) scaleY(.3); 
  }
  80% {
    transform: scaleX(1) scaleY(.3); 
  }
  100% {
    transform: scaleX(1) scaleY(1); 
  }
}
@keyframes ani-pleat {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes ani-line {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes ani-x {
  100% {
   ...

JavaScript

/* <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 100 30" style="enable-background:new 0 0 100 30;" xml:space="preserve">
<style type="text/css">
  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}
  .st1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FF0000;stroke-width:2;stroke-miterlimit:10;}
</style>
<g id="logo_x5F_xpleat">
  <path class="st0" d="M0,0v30h6.1l1.4-1.7H1.7V1.7h27.9L31,0H0z M33.8,0l-1.4,1.7h65.9v26.7H10.4L9,30h91V0H33.8z"/>
  <polygon class="st0" points="16.7,20.8 26.2,10.1 23.5,10.1 14,20.8 	"/>
  <polygon class="st0" 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" 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" points="45,10 45,21 52,21 52,19.3 47,19.3 47,10 	"/>
  <polygon class="st0" 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" 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" d="M83.5,21v-9.1H86V10h-7v1.9h2.7V21H83.5z"/>
  <g id="Layer_4">
  </g>
</g>
<g id="logo_x5F_mask">
  <path class="st1" d="M14.5,9.1l11.3,12.7"/>
  <path class="st1" d="M25.8,9.1L14.5,21.9"/>
  <path class="st1" d="M36.5,15.9h2.2c0,0,2.1-0.4,2.1-2.5c0,0,0.2-2-2.2-2.1h-3.8v9.5"/>
  <path class="st1" d="M52,20.2h-6V10"/>
  <path class="st1" d="M63,20.2h-6v-4.7V11h6"/>
  <path class="st1" d="M57.5,15.5h4.6"/>
  <path class="st1" d="M66.8,21.8L71,10.3l4.2,11.4"/>
  <path class="st1" d="M68.6,18h3.9"/>
  <path class="st1" d="M79,11h7"/>
  <path class="st1" d="M82.5,11.5V21"/>
 ...