<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 132.29166 132.29167">
	<defs>
		<g id="morphs">
			<path fill="blue" id="stretched-c" d="m 18.3339,83.618867 c 0,1.027463 -0.35319,1.541194 -1.220112,1.541194 -0.834813,0 -1.252219,-0.513731 -1.252219,-1.541194 v -33.8877 c 0,-1.027462 0.417406,-1.509085 1.252219,-1.509085 0.89903,0 1.220112,0.481623 1.220112,1.509085 v 4.687797 h 2.697089 v -4.687797 c 0,-3.050279 -1.284328,-4.495148 -3.917201,-4.495148 -2.793413,0 -4.27039,1.509085 -4.27039,4.559364 v 33.855593 c 0,3.01817 1.476977,4.463039 4.27039,4.463039 2.729197,0 3.917201,-1.444869 3.917201,-4.527256 V 78.128365 H 18.3339 Z" />
			<path fill="blue" id="stretched-o" d="m 22.814499,83.618867 c 0,2.921847 1.380652,4.495148 4.206174,4.495148 2.85763,0 4.238282,-1.573301 4.238282,-4.495148 v -33.8877 c 0,-2.921846 -1.380652,-4.495148 -4.238282,-4.495148 -2.825522,0 -4.206174,1.573302 -4.206174,4.495148 z m 5.490502,0 c 0,1.027463 -0.417407,1.541194 -1.284328,1.541194 -0.802705,0 -1.25222,-0.513731 -1.25222,-1.541194 v -33.8877 c 0,-0.995354 0.449515,-1.509085 1.25222,-1.509085 0.866921,0 1.284328,0.513731 1.284328,1.509085 z" />
			<path fill="blue" id="stretched-f1" d="M 36.308471,87.825042 V 67.510449 h 2.825522 V 64.524386 H 36.308471 V 48.511055 h 4.334607 v -2.986062 h -7.288561 v 42.300049 z" />
			<path fill="blue" id="stretched-f2" d="M 45.025346,87.825042 V 67.510449 h 2.825522 V 64.524386 H 45.025346 V 48.511055 h 4.334607 v -2.986062 h -7.288561 v 42.300049 z" />
			<path fill="blue" id="stretched-e1" d="M 58.076829,87.825042 V 84.871087 H 53.742222 V 67.382016 h 2.793413 V 64.395953 H 53.742222 V 48.511055 h 4.174066 v -2.986062 h -7.128021 v 42.300049 z" />
			<path fill="blue" id="stretched-e2" d="M 67.107262,87.825042 V 84.871087 H 62.772655 V 67.382016 h 2.793414 V 64.395953 H 62.772655 V 48.511055 h 4.174066 v -2.986062 h -7.12802 v 42.300049 z" />
			<path fill="white" id="stretched-f3" d="M 80.582668,87.825042 V 67.510449 H 83.40819 V 64.524386 H 80.582668 V 48.511055 h 4.334607 v -2.986062 h -7.288561 v 42.300049 z" />
			<path fill="white" id="stretched-i" d="M 89.363765,87.825042 V 45.524993 h -2.953954 v 42.300049 z" />
			<path fill="white" id="stretched-r" d="m 97.454027,63.079517 c 0,1.155895 -0.481623,1.701735 -1.60541,1.701735 H 94.692722 V 48.511055 h 1.123787 c 1.412761,0 1.637518,0.770597 1.637518,2.376007 z m 3.242933,24.745525 C 100.11901,83.7473 99.508952,71.042351 98.738355,66.868285 99.926359,66.194013 100.4722,65.038117 100.4722,63.047409 V 50.277006 c 0,-3.467685 -1.573304,-4.752013 -4.655691,-4.752013 h -4.10985 v 42.300049 h 2.986063 V 67.478341 h 1.220112 c 0.642164,3.949308 1.091678,16.365284 1.541193,20.346701 z" />
			<path fill="white" id="stretched-s" d="m 107.15923,83.7473 c 0,0.931138 -0.41741,1.412761 -1.31644,1.412761 -0.83481,0 -1.25222,-0.545839 -1.25222,-1.412761 v -5.618935 h -2.85763 V 83.7473 c 0,2.793414 1.28433,4.366715 4.20618,4.366715 2.95395,0 4.17406,-1.573301 4.17406,-4.366715 V 70.433533 c 0,-1.79806 -0.22475,-2.953955 -1.12378,-4.206175 -1.1559,-1.60541 -2.53655,-0.901504 -3.72455,-2.442698 -0.41741,-0.545839 -0.51374,-1.091679 -0.51374,-1.798059 V 49.602734 c 0,-0.963246 0.3853,-1.380652 1.25222,-1.380652 0.89903,0 1.25222,0.577947 1.25222,1.41276 v 4.784122 h 2.76131 v -4.81623 c 0,-2.953954 -1.12379,-4.366715 -4.07774,-4.366715 -2.82552,0 -4.20618,1.412761 -4.20618,4.366715 v 12.415975 c 0,1.316436 0.16054,2.440223 0.80271,3.339253 1.28433,1.830167 2.50444,0.933613 3.69244,2.442698 0.70638,0.89903 0.93114,1.541194 0.93114,2.664981 z" />
			<path fill="white" id="stretched-t" d="M 116.68683,87.825042 V 48.511055 h 2.76131 v -2.986062 h -8.47657 v 2.986062 h 2.76131 v 39.313987 z" />
		</g>
	</defs>
	
	<g id="orig">
		<path fill="blue" id="c" d="m 18.3339,75.152205 c 0,1.02746 -0.35319,1.54119 -1.220112,1.54119 -0.834813,0 -1.252219,-0.51373 -1.252219,-1.54119 V 57.139501 c 0,-1.027462 0.417406,-1.509085 1.252219,-1.509085 0.89903,0 1.220112,0.481623 1.220112,1.509085 v 4.687797 h 2.697089 v -4.687797 c 0,-3.050279 -1.284328,-4.495148 -3.917201,-4.495148 -2.793413,0 -4.27039,1.509085 -4.27039,4.559364 v 17.980588 c 0,3.01817 1.476977,4.463047 4.27039,4.463047 2.729197,0 3.917201,-1.444877 3.917201,-4.527257 V 69.661698 H 18.3339 Z" />
		<path fill="blue" id="o" d="m 22.814499,75.152205 c 0,2.92184 1.380652,4.495147 4.206174,4.495147 2.85763,0 4.238282,-1.573307 4.238282,-4.495147 V 57.139501 c 0,-2.921846 -1.380652,-4.495148 -4.238282,-4.495148 -2.825522,0 -4.206174,1.573302 -4.206174,4.495148 z m 5.490502,0 c 0,1.02746 -0.417407,1.54119 -1.284328,1.54119 -0.802705,0 -1.25222,-0.51373 -1.25222,-1.54119 V 57.139501 c 0,-0.995354 0.449515,-1.509085 1.25222,-1.509085 0.866921,0 1.284328,0.513731 1.284328,1.509085 z" />
		<path fill="blue" id="f1" d="M 36.308471,79.358372 V 67.51045 h 2.825522 v -2.986063 h -2.825522 v -8.604998 h 4.334607 v -2.986062 h -7.288561 v 26.425045 z" />
		<path fill="blue" id="f2" d="M 45.025346,79.358372 V 67.51045 h 2.825522 v -2.986063 h -2.825522 v -8.604998 h 4.334607 v -2.986062 h -7.288561 v 26.425045 z" />
		<path fill="blue" id="e1" d="m 58.076829,79.358372 v -2.953947 h -4.334607 v -9.022408 h 2.793413 v -2.986063 h -2.793413 v -8.476565 h 4.174066 v -2.986062 h -7.128021 v 26.425045 z" />
		<path fill="blue" id="e2" d="m 67.107262,79.358372 v -2.953947 h -4.334607 v -9.022408 h 2.793414 v -2.986063 h -2.793414 v -8.476565 h 4.174066 v -2.986062 h -7.12802 v 26.425045 z" />
		<path fill="white" id="f3" d="M 80.582668,79.358372 V 67.51045 h 2.825522 v -2.986063 h -2.825522 v -8.604998 h 4.334607 v -2.986062 h -7.288561 v 26.425045 z" />
		<path fill="white" id="i" d="M 89.363765,79.358372 V 52.933327 h -2.953954 v 26.425045 z" />
		<path fill="white" id="r" d="m 97.454027,63.079518 c 0,1.155895 -0.481623,1.701735 -1.60541,1.701735 h -1.155895 v -8.861864 h 1.123787 c 1.412761,0 1.637518,0.770597 1.637518,2.376007 z m 3.242933,16.278854 c -0.57795,-4.077737 -1.188008,-8.316024 -1.958605,-12.490086 1.188004,-0.674272 1.733845,-1.830168 1.733845,-3.820876 v -5.36207 c 0,-3.467685 -1.573304,-4.752013 -4.655691,-4.752013 h -4.10985 v 26.425045 h 2.986063 v -11.88003 h 1.220112 c 0.642164,3.949306 1.091678,7.898613 1.541193,11.88003 z" />
		<path fill="white" id="s" d="m 107.15923,75.280635 c 0,0.93114 -0.41741,1.41276 -1.31644,1.41276 -0.83481,0 -1.25222,-0.54584 -1.25222,-1.41276 v -5.618937 h -2.85763 v 5.618937 c 0,2.79341 1.28433,4.366717 4.20618,4.366717 2.95395,0 4.17406,-1.573307 4.17406,-4.366717 v -3.788767 c 0,-1.79806 -0.22475,-2.95396 -1.12378,-4.206176 -1.1559,-1.60541 -2.53655,-3.01817 -3.72455,-4.559364 -0.41741,-0.545839 -0.51374,-1.091679 -0.51374,-1.798059 v -3.917201 c 0,-0.963246 0.3853,-1.380652 1.25222,-1.380652 0.89903,0 1.25222,0.577947 1.25222,1.41276 v 4.784122 h 2.76131 v -4.81623 c 0,-2.953954 -1.12379,-4.366715 -4.07774,-4.366715 -2.82552,0 -4.20618,1.412761 -4.20618,4.366715 v 3.949309 c 0,1.316436 0.16054,2.440223 0.80271,3.339253 1.28433,1.830167 2.50444,3.050279 3.69244,4.559368 0.70638,0.89903 0.93114,1.54119 0.93114,2.66498 z" />
		<path fill="white" id="t" d="M 116.68683,79.358372 V 55.919389 h 2.76131 v -2.986062 h -8.47657 v 2.986062 h 2.76131 v 23.438983 z" />
	</g>
</svg>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	overflow: hidden;
}



.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}

console.clear();

// Actually my early impletation was not so cool
// The code you see here is actually suggested by Greensock. I really love those guys. So helpful

gsap.registerPlugin(MorphSVGPlugin);

const morphs = gsap.utils.toArray("#morphs path");

gsap.to("#orig path", {
	duration: 0.25,
	stagger: {
		each: 0.06,
		repeat: -1,
		repeatDelay: 0.35,
		yoyo: true,
	},
	morphSVG: i => morphs[i]
});