JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TimelineMax.min.js"></script>
<svg width="452.123px" height="108.863px" viewBox="0 0 452.123 108.863">
<defs>
	<mask id="th-mask">
		<path class="th-mask-order01" fill="none" stroke="#FFFFFF" stroke-width="9" stroke-miterlimit="10" d="M55.228,25.265c0,0-5.494,27.274-30.361,27.637
			c0,0-17.306,2.154-4.972-21.642c0,0,14.167-20.204,35.458-21.672c0,0,18.876-3.656,13.542,18.011c0,0-0.332,15.437-33.833,30.385
			c0,0-32.82,9.512-34.827,29.063c0,0-0.673-17.019,20.326-10.231c0,0,31.008,12.521,77.337-0.782c0,0,53.516-16.769,48.923-55.102
			c0,0-1.196-14.342-12.931-15c0,0-16.019-2.333-25.674,15c0,0-0.519-9.333-14.587-8.667c0,0-13.069,1.333-15.402,24.333
			c0,0-2.792,17.833,14.208,34.458c0,0,9.75,13.771,38.443,12.81"/>
		<line class="th-mask-order02" fill="none" stroke="#FFFFFF" stroke-width="1" stroke-miterlimit="10" x1="135.869" y1="62.701" x2="149.687" y2="62.431"/>
		<path class="th-mask-order03" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" d="M147.812,52.056l-13.155,24.759
			c0,0-6.383,12.32,4.905,4.058c0,0,9.912-9.297,16.044-13.976c0,0,5.949-8.561,9.119-3.93c0,0,1.768,1.589-2.135,7.714
			c0,0-8.308,10.674-2.668,11.774c0,0,2.098,3.821,13.057-13.102"/>
		<line class="th-mask-order04" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="166.812" y1="41.056" x2="142.062" y2="85.806"/>
	</mask>
	<mask id="th-logo01">
		<path id="lmt-logo01" fill="#ffffff" d="M244.36,33.258v4.483h-61.55v-4.483h25.771v-6.167h-14.498c-1.265,0-2.355-0.438-3.287-1.295
		c-0.938-0.862-1.4-1.968-1.4-3.33V11.772h38.304V5.525h-38.304V1.036h47.332v15.281h-38.242v4.268c0,0.69,0.138,1.196,0.396,1.456
		c0.26,0.289,0.703,0.425,1.363,0.425h37.321v4.625h-19.18v6.167H244.36z...

CSS

body {
	background-color: #000000;
}
svg {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 5%;
}

#th-mask * {
  
  stroke-dasharray: 900;
  stroke-dashoffset: 900; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
#th-mask .th-mask-order01 {
  animation-name: fireworks-step01-move;
  animation-delay: 0s;
  animation-duration: 2s;
}
#th-mask .th-mask-order02 {
  animation-name: fireworks-step02-move;
  animation-delay: 1s;
  animation-duration: .2s;
}
#th-mask .th-mask-order03 {
  animation-name: fireworks-step03-move;
  animation-delay: 1.1s;
  animation-duration: 1s;
}
#th-mask .th-mask-order04 {
  animation-name: fireworks-step04-move;
  animation-delay: 1.6s;
  animation-duration: .6s;
}

@keyframes fireworks-step01-move {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes fireworks-step02-move {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes fireworks-step03-move {
  100% {
    stroke-dashoffset: 0; 
  }
}
@keyframes fireworks-step04-move {
  100% {
    stroke-dashoffset: 0; 
  }
}
#th-logo01 path,
#th-logo02 path,
#th-logo03 path,
#th-logo04 path {
	transform: translateX(60px);
	opacity: 0;
}

#th-logo01 path,
#th-logo02 path,
#th-logo03 path,
#th-logo04 path {
  animation-duration: 1s;
  stroke-dasharray: 900;
  stroke-dashoffset: 900; 
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
#th-logo01 path {
  animation-name: th-logo01-move;
  animation-delay: .6s;	
}
#th-logo02 path {
  animation-name: th-logo02-move;
  animation-delay: .7s;		
}
#th-logo03 path {
  animation-name: th-logo03-move;
  animation-delay: .8s;		
}
#th-logo04 path {
  animation-name: th-logo04-move;
  animation-delay: .9s;		
}
@keyframes th-logo01-move {
  100% {
    transform: translateX(0px);
	opacity: 1;
  }
}
@keyframes...

JavaScript

/* t1.set( "#lmt-logo01", 1, { 
	x: 0
}, 2)

t1.to( "#lmt-logo01", 1, { 
	scale: 2
}, 2) */