Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="main_svg" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 135.46666 135.46667">
	<defs>
		<g id="filters">
			<filter id="squiggly-0">
				<feturbulence basefrequency="0.02" id="turbulence" numoctaves="3" result="noise" seed="0"></feturbulence>
				<fedisplacementmap id="displacement" in2="noise" in="SourceGraphic" scale="2"></fedisplacementmap>
			</filter>
			<filter id="squiggly-1">
				<feturbulence basefrequency="0.02" id="turbulence" numoctaves="3" result="noise" seed="1"></feturbulence>
				<fedisplacementmap in2="noise" in="SourceGraphic" scale="3"></fedisplacementmap>
			</filter>
			<filter id="squiggly-2">
				<feturbulence basefrequency="0.02" id="turbulence" numoctaves="3" result="noise" seed="2"></feturbulence>
				<fedisplacementmap in2="noise" in="SourceGraphic" scale="2"></fedisplacementmap>
			</filter>
			<filter id="squiggly-3">
				<feturbulence basefrequency="0.02" id="turbulence" numoctaves="3" result="noise" seed="3"></feturbulence>
				<fedisplacementmap in2="noise" in="SourceGraphic" scale="3"></fedisplacementmap>
			</filter>
			<filter id="squiggly-4">
				<feturbulence basefrequency="0.02" id="turbulence" numoctaves="3" result="noise" seed="4"></feturbulence>
				<fedisplacementmap in2="noise" in="SourceGraphic" scale="1"></fedisplacementmap>
			</filter>

			<filter id="disp">
				<feTurbulence id="feTurbulence836" result="turbulence" baseFrequency="1" seed="360" numOctaves="1" type="fractalNoise" />
				<feDisplacementMap id="feDisplacementMap838" xChannelSelector="R" yChannelSelector="G" scale="0.6" in2="turbulence" in="SourceGraphic" />
			</filter>
		</g>

		<g id="morphs">
			<g id="good">
				<path d="m 44.03468,70.180106 h -9.33941 c 0.114069,-10.940665 0.116132,-11.806593 -0.0262,-22.738125 -0.0081,-0.62478 -0.12822,-0.664884 -0.31503,-0.825829 -0.17114,-0.147443 -0.52397,-0.221414 -1.18948,-0.221414 -0.57678,0 -0.9687,0.133311 -1.17575,0.399933 -0.20705,0.266622 -0.31057,22.117619 -0.31057,23.219657 v 3.976755 c 0,0.968728 0.10352,1.60862 0.31057,1.919679 0.20705,0.302172 0.62115,0.453258 1.24229,0.453258 0.68031,0 1.12949,-0.169162 1.39295,-0.487597 0.20485,-0.247606 0.234018,-0.32178 0.29122,-0.508566 0.08994,-0.293682 0.0755,-0.640255 0.0684,-0.918893 h -1.88563 v -3.279453 h 10.93664 v 11.584735 h -5.87873 l -0.86516,-1.546409 c -0.63595,0.666555 -1.44196,1.168694 -2.41804,1.506416 -0.96131,0.328834 -2.10009,0.493251 -3.41632,0.493251 -1.56767,0 -3.0392,-0.226629 -4.41459,-0.679887 -1.36061,-0.462145 -2.39586,-1.030939 -3.10575,-1.706382 -0.70989,-0.675443 -1.15357,-1.381992 -1.33104,-2.119647 -0.17747,-0.746542 -0.2662,-1.861911 -0.2662,-3.346108 V 47.77655 c 0,-2.061879 0.18486,-3.559407 0.55459,-4.492585 0.36973,-0.933177 1.42716,-1.786368 3.1723,-2.559573 1.75993,-0.782092 4.03008,-1.173137 6.81045,-1.173137 2.73601,0 5.00617,0.337721 6.81046,1.013164 1.80429,0.675443 2.98003,1.479753 3.52724,2.41293 0.54719,0.924292 0.82079,28.038174 0.82079,26.26958 z" id="path59" />
				<path d="m 67.09548,73.809071 c 0,2.168528 -0.0891,3.706048 -0.26729,4.612564 -0.16335,0.897628 -0.69795,1.719713 -1.6038,2.466255 -0.891,0.746543 -2.10127,1.319781 -3.63082,1.719714 -1.52955,0.399933 -3.31155,0.5999 -5.346,0.5999 -1.93051,0 -3.66796,-0.186636 -5.21235,-0.559907 -1.52955,-0.382159 -2.76209,-0.950952 -3.69764,-1.706382 -0.93555,-0.75543 -1.49243,-1.577514 -1.67063,-2.466255 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665889 V 48.949688 c 0,-2.168527 0.0817,-3.701605 0.24503,-4.599234 0.1782,-0.906516 0.7128,-1.733044 1.6038,-2.479586 0.90585,-0.746543 2.12354,-1.319781 3.65309,-1.719714 1.52955,-0.399932 3.31155,-0.599899 5.346,-0.599899 1.9305,0 3.66052,0.191079 5.19007,0.573237 1.5444,0.373272 2.78438,0.937622 3.71993,1.693051 0.93554,0.75543 1.49241,1.577515 1.67062,2.466255 0.17819,0.888741 0.26729,2.444037 0.26729,4.66589 z M 57.71772,48.741013 c 0,-1.004277 -0.0965,-1.644169 -0.28957,-1.919679 -0.1782,-0.284398 -0.55688,-0.426596 -1.13603,-0.426596 -0.49005,0 -0.86873,0.115537 -1.13602,0.346609 -0.25246,0.222185 -0.37869,0.88874 -0.37869,1.999666 V 73.60448 c 0,1.253124 0.0817,2.026329 0.24503,2.319613 0.17821,0.293285 0.57916,0.439927 1.20286,0.439927 0.63855,0 1.04692,-0.168861 1.22512,-0.506582 0.1782,-0.337721 0.2673,-1.142031 0.2673,-2.412931 z" id="path61" />
				<path d="m 89.97772,73.809071 c 0,2.168528 -0.0891,3.706048 -0.26728,4.612564 -0.16335,0.897628 -0.69796,1.719713 -1.60381,2.466255 -0.891,0.746543 -2.10127,1.319781 -3.63082,1.719714 -1.52955,0.399933 -3.31155,0.5999 -5.346,0.5999 -1.9305,0 -3.66795,-0.186636 -5.21234,-0.559907 -1.52955,-0.382159 -2.7621,-0.950952 -3.69765,-1.706382 -0.93555,-0.75543 -1.49243,-1.577514 -1.67063,-2.466255 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665889 V 48.949688 c 0,-2.168527 0.0817,-3.701605 0.24503,-4.599234 0.1782,-0.906516 0.7128,-1.733044 1.60381,-2.479586 0.90583,-0.746543 2.12353,-1.319781 3.65308,-1.719714 1.52955,-0.399932 3.31155,-0.599899 5.346,-0.599899 1.9305,0 3.66052,0.191079 5.19007,0.573237 1.5444,0.373272 2.78438,0.937622 3.71993,1.693051 0.93555,0.75543 1.49242,1.577515 1.67063,2.466255 0.17819,0.888741 0.26728,2.444037 0.26728,4.66589 z M 80.59996,48.741013 c 0,-1.004277 -0.0965,-1.644169 -0.28957,-1.919679 -0.1782,-0.284398 -0.55688,-0.426596 -1.13603,-0.426596 -0.49005,0 -0.86873,0.115537 -1.13603,0.346609 -0.25245,0.222185 -0.37867,0.88874 -0.37867,1.999666 V 73.60448 c 0,1.253124 0.0817,2.026329 0.24502,2.319613 0.17821,0.293285 0.57916,0.439927 1.20286,0.439927 0.63855,0 1.04692,-0.168861 1.22512,-0.506582 0.1782,-0.337721 0.2673,-1.142031 0.2673,-2.412931 z" id="path63" />
				<path d="m 91.43197,39.551255 h 7.00943 c 4.52459,0 7.58055,0.12965 9.16787,0.38895 1.60216,0.259298 2.81861,0.68529 3.64935,1.277974 0.83075,0.592684 1.34997,1.254823 1.55765,1.986418 0.20769,0.722333 0.31153,2.148479 0.31153,4.278438 v 29.042881 c 0,2.018831 -0.15576,3.370891 -0.46729,4.056183 -0.29669,0.676029 -0.82333,1.208519 -1.5799,1.597468 -0.75657,0.379688 -1.69116,0.648248 -2.80377,0.805679 -1.1126,0.148173 -2.78893,0.222258 -5.02898,0.222258 H 91.43197 Z m 9.36816,7.17259 v 29.311068 c 1.34996,0 2.18071,-0.166692 2.49224,-0.500078 0.31153,-0.342645 0.46729,-1.264085 0.46729,-2.764316 V 49.515944 c 0,-1.018677 -0.0519,-1.671555 -0.15577,-1.958636 -0.10384,-0.287082 -0.34119,-0.495447 -0.71206,-0.625097 -0.37087,-0.13891 -1.0681,-0.208366 -2.0917,-0.208366 z" id="path65" />
			</g>
			<g id="mood">
				<path id="path960" d="M 44.03468,83.886809 V 106.3764 h -6.1463 V 96.734803 L 35.43319,106.3764 H 31.07398 L 28.48517,97.082083 V 106.3764 H 22.33885 V 83.886809 h 9.10257 c 0.68407,3.623585 1.17634,5.03349 1.82052,8.83923 l 1.60337,-8.83923 z" />
				<path id="path962" d="m 67.09548,96.977953 c 0,2.16853 -0.0891,3.706057 -0.26731,4.612577 -0.16335,0.89762 -0.69795,1.71971 -1.6038,2.46626 -0.89099,0.74654 -2.10126,1.31977 -3.63081,1.71971 -1.52955,0.39992 -3.31155,0.59989 -5.346,0.59989 -1.9305,0 -3.66795,-0.18663 -5.21234,-0.55991 -1.52955,-0.38214 -2.7621,-0.95095 -3.69765,-1.70638 -0.93555,-0.75542 -1.49242,-1.57752 -1.67062,-2.46625 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665897 V 93.28524 c 0,-2.168529 0.0817,-3.701606 0.24503,-4.599232 0.17819,-0.906517 0.71279,-1.733045 1.6038,-2.479586 0.90585,-0.746542 2.12354,-1.319779 3.65309,-1.719713 1.52955,-0.399934 3.31154,-0.5999 5.34599,-0.5999 1.93049,0 3.66052,0.191079 5.19007,0.573238 1.5444,0.373271 2.78437,0.937621 3.71992,1.693051 0.93555,0.755428 1.49242,1.577513 1.67062,2.466253 0.17821,0.888741 0.26731,2.444036 0.26731,4.665889 z m -9.37777,-3.901371 c 0,-1.004278 -0.0965,-1.644172 -0.28958,-1.91968 -0.1782,-0.2844 -0.55687,-0.4266 -1.13601,-0.4266 -0.49005,0 -0.86873,0.115535 -1.13602,0.346606 -0.25246,0.222185 -0.37869,0.888744 -0.37869,1.999674 v 3.696781 c 0,1.25312 0.0817,2.02633 0.24503,2.31961 0.1782,0.29329 0.57915,0.43993 1.20285,0.43993 0.63855,0 1.04692,-0.16886 1.22513,-0.50659 0.17819,-0.33772 0.26729,-1.14203 0.26729,-2.41292 z" />
				<path id="path964" d="m 89.97772,96.977953 c 0,2.16853 -0.0891,3.706057 -0.26729,4.612577 -0.16335,0.89762 -0.69796,1.71971 -1.60381,2.46626 -0.891,0.74654 -2.10127,1.31977 -3.63082,1.71971 -1.52955,0.39992 -3.31154,0.59989 -5.34599,0.59989 -1.9305,0 -3.66795,-0.18663 -5.21236,-0.55991 -1.52955,-0.38214 -2.76209,-0.95095 -3.69763,-1.70638 -0.93555,-0.75542 -1.49243,-1.57752 -1.67063,-2.46625 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665897 V 93.28524 c 0,-2.168529 0.0817,-3.701606 0.24502,-4.599232 0.17821,-0.906517 0.71281,-1.733045 1.6038,-2.479586 0.90585,-0.746542 2.12355,-1.319779 3.6531,-1.719713 1.52955,-0.399934 3.31155,-0.5999 5.346,-0.5999 1.9305,0 3.66052,0.191079 5.19007,0.573238 1.54439,0.373271 2.78437,0.937621 3.71992,1.693051 0.93555,0.755428 1.49243,1.577513 1.67063,2.466253 0.17819,0.888741 0.26729,2.444036 0.26729,4.665889 z m -9.37776,-3.901371 c 0,-1.004278 -0.0965,-1.644172 -0.28958,-1.91968 -0.17819,-0.2844 -0.55687,-0.4266 -1.13603,-0.4266 -0.49005,0 -0.86872,0.115535 -1.13602,0.346606 -0.25245,0.222185 -0.37867,0.888744 -0.37867,1.999674 v 3.696781 c 0,1.25312 0.0817,2.02633 0.24502,2.31961 0.1782,0.29329 0.57915,0.43993 1.20285,0.43993 0.63855,0 1.04693,-0.16886 1.22512,-0.50659 0.17821,-0.33772 0.26731,-1.14203 0.26731,-2.41292 z" />
				<path id="path966" d="m 91.43197,83.886809 h 7.00943 c 4.52459,0 7.58055,0.12965 9.16788,0.38895 1.60215,0.259299 2.8186,0.685292 3.64934,1.277976 0.83075,0.592683 1.34996,1.254821 1.55765,1.986414 0.20769,0.722333 0.31153,2.148479 0.31153,4.278438 v 7.876216 c 0,2.018847 -0.15576,3.370907 -0.46729,4.056187 -0.29669,0.67604 -0.82333,1.20852 -1.57991,1.59747 -0.75657,0.3797 -1.69115,0.64825 -2.80376,0.80569 -1.11261,0.14816 -2.78894,0.22225 -5.02899,0.22225 H 91.43197 Z m 9.36816,7.1726 v 8.144374 c 1.34997,0 2.18071,-0.16669 2.49223,-0.50007 0.31153,-0.34264 0.4673,-1.26408 0.4673,-2.76431 v -2.087891 c 0,-1.018678 -0.0519,-1.671558 -0.15577,-1.958639 -0.10384,-0.287079 -0.34119,-0.495444 -0.71206,-0.625094 -0.37087,-0.138913 -1.06811,-0.20837 -2.0917,-0.20837 z" />
			</g>
		</g>
	</defs>

	<g id="originals" style="filter: url(#disp);">
		<g id="good" style="fill: #35fff2;">
			<path id="path968" d="m 44.03468,49.01344 h -9.33941 c 0.009,-0.433013 -1.2e-4,-1.264735 -0.0262,-1.571459 -0.0529,-0.62259 -0.12822,-0.664884 -0.31503,-0.825829 -0.17114,-0.147443 -0.52397,-0.221414 -1.18948,-0.221414 -0.57678,0 -0.9687,0.133311 -1.17575,0.399933 -0.20705,0.266622 -0.31057,0.950953 -0.31057,2.052991 v 3.976755 c 0,0.968728 0.10352,1.60862 0.31057,1.919679 0.20705,0.302172 0.62115,0.453258 1.24229,0.453258 0.68031,0 1.12949,-0.169162 1.39295,-0.487597 0.20485,-0.247606 0.234,-0.321622 0.29122,-0.508566 0.0899,-0.293578 0.0755,-0.640255 0.0684,-0.918893 H 33.09804 V 50.002845 H 44.03468 V 61.58758 h -5.87873 l -0.86516,-1.546409 c -0.63595,0.666555 -1.44196,1.168694 -2.41804,1.506416 -0.96131,0.328834 -2.10009,0.493251 -3.41632,0.493251 -1.56767,0 -3.0392,-0.226629 -4.41459,-0.679887 -1.36061,-0.462145 -2.39586,-1.030939 -3.10575,-1.706382 -0.70989,-0.675443 -1.15357,-1.381992 -1.33104,-2.119647 -0.17747,-0.746542 -0.2662,-1.861911 -0.2662,-3.346108 V 47.77655 c 0,-2.061879 0.18486,-3.559407 0.55459,-4.492585 0.36973,-0.933177 1.42716,-1.786368 3.1723,-2.559573 1.75993,-0.782092 4.03008,-1.173137 6.81045,-1.173137 2.73601,0 5.00617,0.337721 6.81046,1.013164 1.80429,0.675443 2.98003,1.479753 3.52724,2.41293 0.54719,0.924292 0.82073,3.33432 0.82079,5.102914 z" />

			<path id="path970" d="m 67.09548,52.642405 c 0,2.168528 -0.0891,3.706048 -0.26729,4.612564 -0.16335,0.897628 -0.69795,1.719713 -1.6038,2.466255 -0.891,0.746543 -2.10127,1.319781 -3.63082,1.719714 -1.52955,0.399933 -3.31155,0.5999 -5.346,0.5999 -1.93051,0 -3.66796,-0.186636 -5.21235,-0.559907 -1.52955,-0.382159 -2.76209,-0.950952 -3.69764,-1.706382 -0.93555,-0.75543 -1.49243,-1.577514 -1.67063,-2.466255 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665889 v -3.692717 c 0,-2.168527 0.0817,-3.701605 0.24503,-4.599234 0.1782,-0.906516 0.7128,-1.733044 1.6038,-2.479586 0.90585,-0.746543 2.12354,-1.319781 3.65309,-1.719714 1.52955,-0.399932 3.31155,-0.599899 5.346,-0.599899 1.9305,0 3.66052,0.191079 5.19007,0.573237 1.5444,0.373272 2.78438,0.937622 3.71993,1.693051 0.93554,0.75543 1.49241,1.577515 1.67062,2.466255 0.17819,0.888741 0.26729,2.444037 0.26729,4.66589 z m -9.37776,-3.901392 c 0,-1.004277 -0.0965,-1.644169 -0.28957,-1.919679 -0.1782,-0.284398 -0.55688,-0.426596 -1.13603,-0.426596 -0.49005,0 -0.86873,0.115537 -1.13602,0.346609 -0.25246,0.222185 -0.37869,0.88874 -0.37869,1.999666 v 3.696801 c 0,1.253124 0.0817,2.026329 0.24503,2.319613 0.17821,0.293285 0.57916,0.439927 1.20286,0.439927 0.63855,0 1.04692,-0.168861 1.22512,-0.506582 0.1782,-0.337721 0.2673,-1.142031 0.2673,-2.412931 z" />

			<path id="path972" d="m 89.97772,52.642405 c 0,2.168528 -0.0891,3.706048 -0.26728,4.612564 -0.16335,0.897628 -0.69796,1.719713 -1.60381,2.466255 -0.891,0.746543 -2.10127,1.319781 -3.63082,1.719714 -1.52955,0.399933 -3.31155,0.5999 -5.346,0.5999 -1.9305,0 -3.66795,-0.186636 -5.21234,-0.559907 -1.52955,-0.382159 -2.7621,-0.950952 -3.69765,-1.706382 -0.93555,-0.75543 -1.49243,-1.577514 -1.67063,-2.466255 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665889 v -3.692717 c 0,-2.168527 0.0817,-3.701605 0.24503,-4.599234 0.1782,-0.906516 0.7128,-1.733044 1.60381,-2.479586 0.90583,-0.746543 2.12353,-1.319781 3.65308,-1.719714 1.52955,-0.399932 3.31155,-0.599899 5.346,-0.599899 1.9305,0 3.66052,0.191079 5.19007,0.573237 1.5444,0.373272 2.78438,0.937622 3.71993,1.693051 0.93555,0.75543 1.49242,1.577515 1.67063,2.466255 0.17819,0.888741 0.26728,2.444037 0.26728,4.66589 z m -9.37776,-3.901392 c 0,-1.004277 -0.0965,-1.644169 -0.28957,-1.919679 -0.1782,-0.284398 -0.55688,-0.426596 -1.13603,-0.426596 -0.49005,0 -0.86873,0.115537 -1.13603,0.346609 -0.25245,0.222185 -0.37867,0.88874 -0.37867,1.999666 v 3.696801 c 0,1.253124 0.0817,2.026329 0.24502,2.319613 0.17821,0.293285 0.57916,0.439927 1.20286,0.439927 0.63855,0 1.04692,-0.168861 1.22512,-0.506582 0.1782,-0.337721 0.2673,-1.142031 0.2673,-2.412931 z" />

			<path id="path974" d="m 91.43197,39.551255 h 7.00943 c 4.52459,0 7.58055,0.12965 9.16787,0.38895 1.60216,0.259298 2.81861,0.68529 3.64935,1.277974 0.83075,0.592684 1.34997,1.254823 1.55765,1.986418 0.20769,0.722333 0.31153,2.148479 0.31153,4.278438 v 7.876215 c 0,2.018831 -0.15576,3.370891 -0.46729,4.056183 -0.29669,0.676029 -0.82333,1.208519 -1.5799,1.597468 -0.75657,0.379688 -1.69116,0.648248 -2.80377,0.805679 -1.1126,0.148173 -2.78893,0.222258 -5.02898,0.222258 H 91.43197 Z m 9.36816,7.17259 v 8.144402 c 1.34996,0 2.18071,-0.166692 2.49224,-0.500078 0.31153,-0.342645 0.46729,-1.264085 0.46729,-2.764316 v -2.087909 c 0,-1.018677 -0.0519,-1.671555 -0.15577,-1.958636 -0.10384,-0.287082 -0.34119,-0.495447 -0.71206,-0.625097 -0.37087,-0.13891 -1.0681,-0.208366 -2.0917,-0.208366 z" />
		</g>
		<g id="mood">
			<path d="M 44.03468,62.720143 V 106.3764 h -6.1463 V 85.093136 L 35.43319,106.3764 H 31.07398 L 28.48517,85.440416 V 106.3764 H 22.33885 V 62.720143 h 9.10257 c 0.68407,3.623585 1.17634,14.558489 1.82052,18.364229 l 1.60337,-18.364229 z" id="path976" style="fill: #8828ff;" />
			<path d="m 67.09548,96.977953 c 0,2.16853 -0.0891,3.706057 -0.26731,4.612577 -0.16335,0.89762 -0.69795,1.71971 -1.6038,2.46626 -0.89099,0.74654 -2.10126,1.31977 -3.63081,1.71971 -1.52955,0.39992 -3.31155,0.59989 -5.346,0.59989 -1.9305,0 -3.66795,-0.18663 -5.21234,-0.55991 -1.52955,-0.38214 -2.7621,-0.95095 -3.69765,-1.70638 -0.93555,-0.75542 -1.49242,-1.57752 -1.67062,-2.46625 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665897 V 72.118574 c 0,-2.168529 0.0817,-3.701606 0.24503,-4.599232 0.17819,-0.906517 0.71279,-1.733045 1.6038,-2.479586 0.90585,-0.746542 2.12354,-1.319779 3.65309,-1.719713 1.52955,-0.399934 3.31154,-0.5999 5.34599,-0.5999 1.93049,0 3.66052,0.191079 5.19007,0.573238 1.5444,0.373271 2.78437,0.937621 3.71992,1.693051 0.93555,0.755428 1.49242,1.577513 1.67062,2.466253 0.17821,0.888741 0.26731,2.444036 0.26731,4.665889 z M 57.71771,71.909916 c 0,-1.004278 -0.0965,-1.644172 -0.28958,-1.91968 -0.1782,-0.2844 -0.55687,-0.4266 -1.13601,-0.4266 -0.49005,0 -0.86873,0.115535 -1.13602,0.346606 -0.25246,0.222185 -0.37869,0.888744 -0.37869,1.999674 v 24.863447 c 0,1.25312 0.0817,2.02633 0.24503,2.31961 0.1782,0.29329 0.57915,0.43993 1.20285,0.43993 0.63855,0 1.04692,-0.16886 1.22513,-0.50659 0.17819,-0.33772 0.26729,-1.14203 0.26729,-2.41292 z" id="path978" style="fill: #ff22a7;" />
			<path d="m 89.97772,96.977953 c 0,2.16853 -0.0891,3.706057 -0.26729,4.612577 -0.16335,0.89762 -0.69796,1.71971 -1.60381,2.46626 -0.891,0.74654 -2.10127,1.31977 -3.63082,1.71971 -1.52955,0.39992 -3.31154,0.59989 -5.34599,0.59989 -1.9305,0 -3.66795,-0.18663 -5.21236,-0.55991 -1.52955,-0.38214 -2.76209,-0.95095 -3.69763,-1.70638 -0.93555,-0.75542 -1.49243,-1.57752 -1.67063,-2.46625 -0.1782,-0.88874 -0.2673,-2.444037 -0.2673,-4.665897 V 72.118574 c 0,-2.168529 0.0817,-3.701606 0.24502,-4.599232 0.17821,-0.906517 0.71281,-1.733045 1.6038,-2.479586 0.90585,-0.746542 2.12355,-1.319779 3.6531,-1.719713 1.52955,-0.399934 3.31155,-0.5999 5.346,-0.5999 1.9305,0 3.66052,0.191079 5.19007,0.573238 1.54439,0.373271 2.78437,0.937621 3.71992,1.693051 0.93555,0.755428 1.49243,1.577513 1.67063,2.466253 0.17819,0.888741 0.26729,2.444036 0.26729,4.665889 z M 80.59996,71.909916 c 0,-1.004278 -0.0965,-1.644172 -0.28958,-1.91968 -0.17819,-0.2844 -0.55687,-0.4266 -1.13603,-0.4266 -0.49005,0 -0.86872,0.115535 -1.13602,0.346606 -0.25245,0.222185 -0.37867,0.888744 -0.37867,1.999674 v 24.863447 c 0,1.25312 0.0817,2.02633 0.24502,2.31961 0.1782,0.29329 0.57915,0.43993 1.20285,0.43993 0.63855,0 1.04693,-0.16886 1.22512,-0.50659 0.17821,-0.33772 0.26731,-1.14203 0.26731,-2.41292 z" id="path980" style="fill: #ffe627;" />
			<path d="m 91.43197,62.720143 h 7.00943 c 4.52459,0 7.58055,0.12965 9.16788,0.38895 1.60215,0.259299 2.8186,0.685292 3.64934,1.277976 0.83075,0.592683 1.34996,1.254821 1.55765,1.986414 0.20769,0.722333 0.31153,2.148479 0.31153,4.278438 v 29.042882 c 0,2.018847 -0.15576,3.370907 -0.46729,4.056187 -0.29669,0.67604 -0.82333,1.20852 -1.57991,1.59747 -0.75657,0.3797 -1.69115,0.64825 -2.80376,0.80569 -1.11261,0.14816 -2.78894,0.22225 -5.02899,0.22225 H 91.43197 Z m 9.36816,7.1726 v 29.31104 c 1.34997,0 2.18071,-0.16669 2.49223,-0.50007 0.31153,-0.34264 0.4673,-1.26408 0.4673,-2.76431 V 72.684846 c 0,-1.018678 -0.0519,-1.671558 -0.15577,-1.958639 -0.10384,-0.287079 -0.34119,-0.495444 -0.71206,-0.625094 -0.37087,-0.138913 -1.06811,-0.20837 -2.0917,-0.20837 z" id="path982" style="fill: #216bff;" />
		</g>
	</g>
</svg>

<div class="noisy__bg">
	<div class="bg"></div>
</div>

<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>
              
            
!

CSS

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

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

#main_svg {
	animation: squiglly 0.8s infinite;
}

.noisy__bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	overflow: hidden;
	.bg {
		position: absolute;
		width: 300%;
		height: 300%;
		left: -110%;
		top: -110%;
		filter: contrast(100) brightness(0.75) grayscale(1);
		animation: grain 2s steps(1) infinite;
		background-blend-mode: difference;
		background-image: url("https://source.unsplash.com/2bg4wDCGU3g/1280x720");
		background-color: salmon;
		background-size: cover;
	}
}

@keyframes squiglly {
	0% {
		-webkit-filter: url("#squiggly-0");
		filter: url("#squiggly-0");
	}
	25% {
		-webkit-filter: url("#squiggly-1");
		filter: url("#squiggly-1");
	}
	50% {
		-webkit-filter: url("#squiggly-2");
	}
	75% {
		-webkit-filter: url("#squiggly-3");
		filter: url("#squiggly-3");
	}
	100% {
		-webkit-filter: url("#squiggly-4");
		filter: url("#squiggly-4");
	}
}

@keyframes grain {
	0%,
	to {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	10% {
		-webkit-transform: translate(-5%, -10%);
		transform: translate(-5%, -10%);
	}
	20% {
		-webkit-transform: translate(-15%, 5%);
		transform: translate(-15%, 5%);
	}
	30% {
		-webkit-transform: translate(7%, -25%);
		transform: translate(7%, -25%);
	}
	40% {
		-webkit-transform: translate(-5%, 25%);
		transform: translate(-5%, 25%);
	}
	50% {
		-webkit-transform: translate(-15%, 10%);
		transform: translate(-15%, 10%);
	}
	60% {
		-webkit-transform: translate(15%);
		transform: translate(15%);
	}
	70% {
		-webkit-transform: translateY(15%);
		transform: translateY(15%);
	}
	80% {
		-webkit-transform: translate(3%, 35%);
		transform: translate(3%, 35%);
	}
	90% {
		-webkit-transform: translate(-10%, 10%);
		transform: translate(-10%, 10%);
	}
}

.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);
		}
	}
}

              
            
!

JS

              
                console.clear();

const { gsap } = window;


gsap.registerPlugin(MorphSVGPlugin);

gsap.ticker.fps(18) // control the framerate

const MORPHS = {
	good: gsap.utils.toArray("#morphs #good path"),
	mood: gsap.utils.toArray("#morphs #mood path")
};

const TL_DEFAULTS = {
	defaults: {
		duration: 0.8,
		repeat: -1,
		ease: "power1.out",
		yoyoEase: true,
		stagger: 0.26
	}
};

const SEEK_DURATION = TL_DEFAULTS.defaults.duration * 2;
const TIMESCALE = 1.12; 
// well this is not needed. But, added just to in case you didn't knew that you dont need to adjust the 'duration' prop of every timeline separately in your code. Just scale the time using `.timeScale(TIME)` of a gsap timeline.

gsap
	.timeline({
		...TL_DEFAULTS
	})
	.to("#originals #good path", {
		morphSVG: (i) => MORPHS.good[i]
	})
	.seek(SEEK_DURATION)
	.timeScale(TIMESCALE);

gsap
	.timeline({
		...TL_DEFAULTS
	})
	.to("#originals #mood path", {
		morphSVG: (i) => MORPHS.mood[i]
	})
	.seek(SEEK_DURATION)
	.timeScale(TIMESCALE);

              
            
!
999px

Console