JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="logo">
<svg viewBox="0 0 164.839 73.697">
<g id="text-group">
	<polygon id="text-m" style="fill:none;stroke:#000000;stroke-linejoin:round;" points="69.948,2.61 47.42,50.617 
	22.966,2.589 2,2.589 2,72.469 22.966,72.469 22.966,43.623 37.365,72.491 58.331,72.491 69.948,47.218 69.948,72.491 
	90.914,72.491 90.914,2.61 "/>
<polygon id="text-z" style="fill:none;stroke:#000000;stroke-linejoin:round;" points="163.5,2 95,2 95,22.966 
	137.47,22.966 95,50.731 95,71.697 163.5,71.697 163.5,50.731 123.03,50.731 163.5,22.966 "/>
</g>
</svg>
</div>

CSS

.logo {
  width: 70%;
}
.logo svg {
  width: 100%;
  fill: #000000;
}
.logo svg #text-m, 
.logo svg #text-z {
  stroke-width: 1;
  
  animation-duration: 2s;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.logo svg #text-m {
  animation-name: dash, bgcolor;
  animation-delay: 0.1s, 1s;
}
.logo svg #text-z {
  animation-name: dash2, bgcolor2;
  animation-delay: 1.5s, 2s;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0; 
    
  }
}
@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
    
  }
}
@keyframes bgcolor {
  0% {
                  fill: white;
              }
              100% {
                  fill: black;
              }
}
@keyframes bgcolor2 {
  0% {
                  fill: white;
              }
              100% {
                  fill: black;
              }
}