JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 618.3 337.1">
<mask id="mask">
  <path stroke="#FFFFFF" stroke-width="9" d="M167.8,147.1V5.7H5.8v162.7h607v163.3h-445V191.1"/>
</mask>
<mask id="mask2">
  <path fill="#FFFFFF" d="M58.2,49.3v49.8c0,15.1,11.4,26.1,27.3,26.1c15.9,0,27.3-11,27.3-26.1V49.3h-14v49.3c0,9.1-4.7,14.8-13.3,14.8
	c-8.6,0-13.2-5.7-13.2-14.8V49.3H58.2z"/>
</mask>
<polygon mask="url('#mask')" class="st1" points="11.3,163.1 11.4,11.3 162.3,11.3 162.3,146.3 173.3,146.3 173.3,0 0,0 0,174 607.3,174 607.3,325.8 
	173.3,325.8 173.3,191.1 162.2,191.1 162.2,337 618.3,337.1 618.3,163.2 "/>
  
<path class="st0 t_x" d="M58.2,49.3v49.8c0,15.1,11.4,26.1,27.3,26.1c15.9,0,27.3-11,27.3-26.1V49.3h-14v49.3c0,9.1-4.7,14.8-13.3,14.8
	c-8.6,0-13.2-5.7-13.2-14.8V49.3H58.2z"/>
<path class="st0 t_p" d="M249.6,258.6c13,0,22.1-8.9,22.1-21.1c0-12.3-9.1-21.1-22.1-21.1h-27.2v68.2H235v-25.9H249.6z M235.8,227.9h14
	c6.3,0,10.6,3.6,10.6,9.7c0,6-4.2,9.6-10.6,9.6h-14V227.9z"/>  
<polygon class="st0 t_l" points="297.6,216.6 297.6,284.8 340.8,284.8 340.8,274.3 309.1,274.3 309.1,216.6 "/>
<polygon class="st0 t_e" points="412.6,228.2 412.6,216.6 367.5,216.6 367.5,284.8 412.6,284.8 412.6,274.3 380,274.3 380,255.1 
	406.9,255.1 406.9,245.4 380,245.4 380,228.2 "/>
<path class="st0 t_a" d="M473.9,272.3l4.1,12.5h12.7l-24.7-68.2h-9.7l-24.6,68.2h12.7l4.2-12.5H473.9z M461.7,232.9l9.3,27.6h-18.8
	L461.7,232.9z"/>
<polygon class="st0 t_t" points="539,285.8 539,229.1 556.3,229.1 556.3,217.6 508.2,217.6 508.2,229.1 526.5,229.1 526.5,285.8 "/>
</svg>
</div>

CSS

html, body {height: 100%;}
.wrap {
  position: relative;
  height:100%;
  padding: 30px;
}
svg {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}
polygon, path {
  fill:#000000;
}


#mask * {
  animation-name: line-move;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-duration: 2s;
}
#mask2 * {
  animation-name: typo-move;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-duration: 2s;
  transform: translate(-2px, 0);
}
.st0 {
  animation-name: typo-move2;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-duration: .3s;
  transform: translateX(-5px);
  opacity: 0;
}
.t_x {animation-delay: 2s;}
.t_p {animation-delay: 2.2s;}
.t_l {animation-delay: 2.4s;}
.t_e {animation-delay: 2.6s;}
.t_a {animation-delay: 2.8s;}
.t_t {animation-delay: 3s;}

@keyframes line-move {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes typo-move2 {
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes typo-move {
  100% {
    stroke-dashoffset: 0; 
    transform: translateX(0px);
  }
}