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>
<div class="wrap">
<svg width="131.842px" height="34.984px" viewBox="0 0 131.842 34.984">
<defs>
<mask id="mk-best-life">
	<rect x="115.092" y="10.15" fill="#45BEA9" width="15.75" height="23.625"/>
</mask>
<mask id="mk-best-life02">
  <rect x="99.842" y="27.591" fill="#45BEA9" width="10.313" height="1.039"/>
</mask>
<mask id="mk-best-life03">
  <path class="line" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M116.171,4.151c0,0-9.083,5.311-11.75,23.008"/>
  
</mask>
</defs>
<g id="best-life">
	<g>
		<path class="line-mask" mask="url('#mk-best-life03')" fill="none" stroke="#000000" stroke-linecap="round" d="M116.171,4.151c0,0-9.083,5.311-11.75,23.008"/>
    <!-- <rect class="line-mask" mask="url('#mk-best-life03')" x="101.175" y="3.843" fill="#FFFFFF" width="15.75" height="1"  /> -->
		<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M126.217,1.963h-6.313c0,0-2.17,0.5-3.732,2.188"
			/>
		<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="122.967" y1="1.963" x2="122.967" y2="30.906"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M130.842,16.963c0-2.619-2.074-4.853-5-5.756
			V10.15h-5.75v1.057c-2.926,0.903-5,3.137-5,5.756c0,0.341,0,1,0,1v15.813h15.75V17.963
			C130.842,17.963,130.842,17.304,130.842,16.963z"/>
		<path mask="url('#mk-best-life')" fill="#45BEA8" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M130.842,16.963c0-2.619-2.074-4.853-5-5.756
			V10.15h-5.75v1.057c-2.926,0.903-5,3.137-5,5.756c0,0.341,0,1,0,1v15.813h15.75V17.963
			C130.842,17.963,130.842,17.304,130.842,16.963z"/>
		
	</g>
	<g>
		<rect x="101.842" y="30.9" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="6.313" height="2.875"/>
		<polygon fill="none"...

CSS

html, body {height: 100%;}
body {
  background: #4d4741;
}
.wrap {
 
}
svg {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 5%;
}
svg path,
svg circle,
svg polygon {
  stroke-width: 1.5;
}
.line {
  stroke-width: 1;
  stroke: #45BEA9;
  stroke-dasharray: 1, 2;
}
.line-mask {
  stroke-width: 2;
  stroke: #FFFFFF;
  stroke-dasharray: 0, 0;
  stroke-dashoffset: 0; 
}

JavaScript

TweenMax.to("#mk-best-life rect", 6, {
	scaleY: 0.2,
  transformOrigin: "50% 100%",
  ease: Sine.easeNone
}, 2); 

TweenMax.to("#mk-best-life02 rect", 6, {
  scaleY: 12,
  delay: 0.4,
  transformOrigin: "50% 100%",
  ease: Sine.easeNone
}, 1); 

TweenMax.to(".line-mask", 4, {
  strokeDasharray: 1200,
  strokeDashoffset:-50,
  transformOrigin: "50% 0%",
  ease: Sine.easeNone
}, 0); 

var line = $('.line'),
    t1 = new TimelineMax()
t1.to( line, 5, { 
  strokeDashoffset:-60,
  ease: Sine.easeNone
}, 0);
t1.to( line, 1, {
  delay: 2,
  opacity: 0
}, 1);