JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<svg viewBox="0 0 36.583 36.583">
<g id="svg-group">
<polygon  id="logo-lmt-m" fill="#EC2027" points="28.208,8.292 21.708,8.292 18.291,21.076 14.875,8.292 8.375,8.292 4.875,27.458 
	10.209,27.458 12.402,18.448 16.042,27.625 16.541,27.625 20.042,27.625 20.541,27.625 24.181,18.448 26.374,27.458 31.708,27.458 
	"/>

<path id="logo-lmt-frame" fill="#EC2027" d="M32.583,0H4C1.791,0,0,1.791,0,4v28.583c0,2.209,1.791,4,4,4h28.583c2.209,0,4-1.791,4-4V4
	C36.583,1.791,34.792,0,32.583,0z M33.781,30.394c0,1.871-1.516,3.387-3.387,3.387H6.188c-1.871,0-3.387-1.516-3.387-3.387V6.188
	c0-1.87,1.516-3.387,3.387-3.387h24.206c1.871,0,3.387,1.518,3.387,3.387V30.394z"/>
</g>  
</svg>

CSS

* {
  padding: 0;
  margin: 0;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
svg polygon, svg path {
  fill: #ed1b24;
}

JavaScript

TweenMax.set("#svg-group", { 
    scale: 0.7,
    transformOrigin: "50% 50%"
});

var tl = new TimelineMax({repeat:-1}),
    t2 = new TimelineMax();

tl.to("#logo-lmt-m", 1, {scaleY: 1, transformOrigin: "50% 100%"})
.to("#logo-lmt-m", 0.3, {scaleY: 0.9, ease: Power4.easeOut})
.to("#logo-lmt-m", 0.3, {scaleY: 1})
.to("#logo-lmt-m", 0.5, {scaleY: 0.9, ease: Power4.easeOut})
.to("#logo-lmt-m", 0.5, {scaleY: 1});

t2.to("#logo-lmt-frame", 1, {rotation: 45, transformOrigin: "50% 50%", ease: Power3.easeOut})
.to("#logo-lmt-frame", 2, {rotation: "+=90", 
transformOrigin: "50% 50%", repeat: -1, ease: Power3.easeOut});