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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="logo-anim" viewBox="10 40 280 150">
	<defs>
		<clipPath id="clip-path">
			<path d="M152.36,81.77c3.32.1,5.91.1,9.44.1,1.76,0,2.9.1,3.22.93s-.63,3.22-.73,4.15c0,.52-.62,3.11-.73,3.63a61.76,61.76,0,0,0-1,6.44c-.51,3.42-2.28,16.6-2.8,18.78-.93,3.52-1.14,7-2.17,11.72-.11.62-1.56,7.26-1.77,7.88-.73,5.92-1.45,8.51-2.7,14.63-.51,2.49-1.24,4.57-1.76,7.27-.83,4.66-5.4,4.56-6.12,2.07a13.59,13.59,0,0,1-.73-2.18c-.31-1.66-.73-3.22-1-4.88a16.36,16.36,0,0,1-.51-2.38c-.73-3-.94-4.15-1.66-7.47-.94-4.26-1.35-6.75-2-9.13a29.23,29.23,0,0,1-1.14-4.05c-1.24-5.7-2.38-11.31-3.73-17-.73-2.91-1.56-5.81-2.18-8.61-.93-4-1.45-4.25-2.08-8.3a57.85,57.85,0,0,0-1.66-8.1,14,14,0,0,1-.51-3.94c.2-.93.51-.93,1.66-1.24.83-.21,6.43-.42,7.47-.42,5.81.21,9.65,0,15.25.11Z" fill="none" />
		</clipPath>
		<clipPath id="clip-path-2">
			<path id="s-clip" d="M104.18,106a20.51,20.51,0,0,0-.55-4,14.76,14.76,0,0,0-1.35-3.55,5.8,5.8,0,0,0-2.85-2.11c-1.66-.68-5,.25-6.44,2.19s-.39,5.69.33,7.33a16,16,0,0,0,4.59,6.34c2.11,1.61,4.24,3.35,6.23,5,1.37,1.13,2.48,2.18,3.85,3.31,2.75,2.25,4.12,3.37,6.21,4.87a33.22,33.22,0,0,1,12.59,17,35.84,35.84,0,0,1,1,5.15c.45,4.11-.95,8-4.2,11.42a20.85,20.85,0,0,1-1.47,1.57,15.3,15.3,0,0,1-7.59,4.08,38.09,38.09,0,0,1-9.24,1,14.78,14.78,0,0,1-6.45-1.63c-1.86-1-4-1.89-5.39-3.38-.35-.44-.94-.83-1.16-1.3a23.61,23.61,0,0,1-4.13-8.47,49.28,49.28,0,0,1-.86-8.75A3.14,3.14,0,0,1,90,139.82a4.06,4.06,0,0,1,1.25-.12,63.3,63.3,0,0,1,7.18.21c1.57.2,2,.49,2,1.89a32.43,32.43,0,0,0,.84,6.07c.77,2.53,1.31,4.59,3.42,5.56a7.59,7.59,0,0,0,7.69-1,6.72,6.72,0,0,0,1.86-6,13.94,13.94,0,0,0-3.52-6.69,52.34,52.34,0,0,0-6.4-5.85c-2-1.64-3.9-3.55-5.79-5.33-1.42-1.38-2.82-2.62-4.37-4a46.15,46.15,0,0,1-6.18-6A10,10,0,0,0,86.37,117c-3.86-3.31-5.85-7.5-7.12-12a21.47,21.47,0,0,1-.72-8,8.89,8.89,0,0,1,2.61-5.37,20,20,0,0,1,8.18-5,27.77,27.77,0,0,1,15.88-.9,17.27,17.27,0,0,1,7,4.84,13.21,13.21,0,0,1,2.53,5,41.75,41.75,0,0,1,1.3,4.58,13,13,0,0,0,.45,2.2c.39,2.6-.76,3.85-3.82,4.47-.86.17-5.71.76-6.59.81-1.3-.12-1.76-.53-1.86-1.66Z" fill="none" />
		</clipPath>

		<clipPath id="clip-path-g">
			<path id="g-clip" d="M209.2,140c0,1.58,0,6.1.2,7.67.06,1.26.68,7,.75,8.28a12.55,12.55,0,0,1-.12,3.69c.15,2.83-8.8,2.78-13.66,2.3-6-.63-12.8-5.11-16.5-9.44a36.07,36.07,0,0,1-8.94-21.73,61.48,61.48,0,0,1-.12-8.31c0-.31.07-.63.06-.84a61.8,61.8,0,0,1,.82-6.47c.07-.63.24-1.38.31-2.12a43.8,43.8,0,0,1,1.81-7.46,41.42,41.42,0,0,1,3.68-8.09c3.09-5.11,6-8.42,8.81-10.46l1.42-1c4.15-3.07,5.87-4.31,10.45-5.29,3.54-.72,4.75.27,5.23,1.4.11.1.12.21.24.41a8.58,8.58,0,0,1,.88,6.69v.11c-1,1.73-1.06,1.84-4,3.16a10.77,10.77,0,0,0-2,1c-.41.23-.82.47-1.53.93-4.29,2.43-7.56,6.29-10.7,12.56a39.89,39.89,0,0,0-1.69,3.77,30.69,30.69,0,0,0-2.35,13.39,4.84,4.84,0,0,1,0,1.26l0,.84a65.6,65.6,0,0,0,2.34,10.5c1.73,4.75,3.13,7.31,6.85,10.06a21.36,21.36,0,0,0,5.21,3l.43.18a5.92,5.92,0,0,0,2.54.29c0-5.47-.07-15.25,0-18.2a1.22,1.22,0,0,0-.05-.84c-.17-1.15-.2-1.78-2.2-1.78a21.31,21.31,0,0,1-2.51.24c-.32,0-1.05.16-1.47.18-2-.11-3.78,0-3.81-2.43l-.2-3.88c-.06-1.16-.15-2.73.75-3.73s2.59-.66,4.71-.46c4.94,0,6.4-.34,11.14-.27,2.32.09,3,2.37,2.88,4.69-.29,4.54.45,14.5.43,16.18Z" fill="#575060" />
		</clipPath>

		<clipPath id="clip-path-flash">
			<path d="M156.35,164a4.84,4.84,0,0,1,1.55.94c.77.71,1.4,1.47,2.1,2.21a2.1,2.1,0,0,0,.51.47,12.73,12.73,0,0,1,1.43,1.51c.32.41.77.74,1.12,1.11.87.92,1.72,1.87,2.62,2.79.52.51,1.1,1,1.65,1.47l.25.22c.59.56.52,1.16-.16,1.68a.68.68,0,0,1-.26.16,1.35,1.35,0,0,1-1.95-.17,11.7,11.7,0,0,1-.81-1,12.84,12.84,0,0,0-1.47-1.48C161.88,173,161,172,160,171l-3.25-3.31c-.6-.59-1.17-1.22-1.8-1.8a.85.85,0,0,1-.14-1.14,3.19,3.19,0,0,1,.69-.73.64.64,0,0,1,.23-.1A.83.83,0,0,1,156.35,164Z" fill="#1d1d1b" />
			<path d="M149.15,167.78a4.86,4.86,0,0,1,.53,1.74c.09,1,.06,2,.08,3a2,2,0,0,0,.07.68,13.31,13.31,0,0,1,.06,2.09c0,.52.08,1.06.09,1.57,0,1.27,0,2.54.09,3.83,0,.73.15,1.47.24,2.2,0,.11,0,.22,0,.33.07.81-.38,1.21-1.24,1.14a.82.82,0,0,1-.3-.05c-.89-.15-1.37-.65-1.33-1.43,0-.43,0-.87.07-1.3a12.26,12.26,0,0,0-.11-2.09c-.16-1.38-.18-2.74-.25-4.09-.06-1.55-.14-3.08-.2-4.63-.06-.84-.06-1.69-.15-2.55a.85.85,0,0,1,.67-.93,3,3,0,0,1,1-.09.54.54,0,0,1,.24.08A.83.83,0,0,1,149.15,167.78Z" fill="#1d1d1b" />
			<path d="M141.27,165.26a4.38,4.38,0,0,1-.62,1.47c-.52.75-1.1,1.4-1.66,2.1a1.81,1.81,0,0,0-.33.5,11.27,11.27,0,0,1-1.14,1.44c-.31.33-.54.76-.82,1.11-.68.87-1.4,1.72-2.08,2.63-.39.51-.73,1.08-1.08,1.61l-.15.25c-.42.59-.94.59-1.48.06a.56.56,0,0,1-.17-.2,1.2,1.2,0,0,1-.09-1.73c.25-.27.49-.58.77-.83a9.88,9.88,0,0,0,1.1-1.47c.67-1,1.42-1.95,2.13-2.9l2.47-3.23c.43-.6.9-1.18,1.33-1.8a.73.73,0,0,1,1-.25,2.55,2.55,0,0,1,.72.51.49.49,0,0,1,.11.19A.73.73,0,0,1,141.27,165.26Z" fill="#1d1d1b" />
		</clipPath>
	</defs>
	<g id="hide-flash" opacity="0">
		<g id="g">
			<path id="g-path" clip-path="url(#clip-path-g)" d="M192.35,125.28h11l1.58,31.64s-18.77-.16-25.34-14.16-2.25-28.26-1.5-31.07,7.63-23.16,25.5-26.69" fill="none" stroke="#575060" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14" />
			<path id="g-shape" class="hide" opacity="0" d="M210.82,155.51a12.7,12.7,0,0,1,.05,3.69c.28,2.82-8.66,3.18-13.54,2.93-6.05-.34-13-4.51-16.92-8.66a36.07,36.07,0,0,1-9.94-21.29,61.88,61.88,0,0,1-.51-8.29c0-.32,0-.64,0-.85a62.44,62.44,0,0,1,.51-6.49c0-.64.18-1.39.21-2.14a43.85,43.85,0,0,1,1.47-7.54,42.4,42.4,0,0,1,3.29-8.25c2.86-5.24,5.58-8.68,8.32-10.86l1.37-1.09c4-3.25,5.67-4.58,10.19-5.77,3.51-.87,7-.05,7.48,1.06.12.1,1.08.43,1.39,3.54S210.7,154.25,210.82,155.51Z" fill="#575060" />
			<line id="movement-3" class="movement2" opacity="0" stroke-width="2" x1="216.81" y1="159.46" x2="210.23" y2="82.87" fill="none" stroke="#96d1d1" stroke-linecap="round" stroke-miterlimit="10" />
			<path id="movement-4" class="movement2" opacity="0" stroke-width="2" d="M203.34,169s-35.42-2.19-38.23-36.32,10.79-43.9,10.79-43.9" fill="none" stroke="#e2a3bd" stroke-linecap="round" stroke-miterlimit="10" />
		</g>
		<g id="v">
			<g clip-path="url(#clip-path)">
				<g>
					<path d="M152.36,81.77c3.32.1,5.91.1,9.44.1,1.76,0,2.9.1,3.22.93s-.63,3.22-.73,4.15c0,.52-.62,3.11-.73,3.63a61.76,61.76,0,0,0-1,6.44c-.51,3.42-2.28,16.6-2.8,18.78-.93,3.52-1.14,7-2.17,11.72-.11.62-1.56,7.26-1.77,7.88-.73,5.92-1.45,8.51-2.7,14.63-.51,2.49-1.24,4.57-1.76,7.27-.83,4.66-5.4,4.56-6.12,2.07a13.59,13.59,0,0,1-.73-2.18c-.31-1.66-.73-3.22-1-4.88a16.36,16.36,0,0,1-.51-2.38c-.73-3-.94-4.15-1.66-7.47-.94-4.26-1.35-6.75-2-9.13a30.68,30.68,0,0,1-1.14-4.05c-1.24-5.7-2.38-11.31-3.73-17-.73-2.91-1.56-5.81-2.18-8.61-.93-4-1.45-4.25-2.08-8.3a57.85,57.85,0,0,0-1.66-8.1,14,14,0,0,1-.51-3.94c.2-.93.51-.93,1.66-1.24.83-.21,6.43-.42,7.47-.42,5.81.21,9.65,0,15.25.11Z" fill="#575060" />
					<path id="v-bottom" d="M139.19,133c0,.1.06.2.1.3.62,2.39,1,4.87,2,9.13.73,3.32.93,4.46,1.66,7.47a15.12,15.12,0,0,0,.52,2.38c.31,1.66.72,3.22,1,4.88a13.59,13.59,0,0,0,.73,2.18c.73,2.49,5.29,2.59,6.12-2.07.52-2.7,1.25-4.78,1.77-7.27,1.24-6.12,2-8.71,2.69-14.63.21-.62,1.67-7.26,1.77-7.88.17-.78.31-1.52.45-2.24Z" fill="#96d1d1" />
					<path id="v-top" d="M161.8,81.87c-3.53,0-6.12,0-9.44-.1-5.61-.11-9.44.1-15.25-.11-1,0-6.64.21-7.47.42-1.14.31-1.46.31-1.66,1.24a13.91,13.91,0,0,0,.51,3.94,59.33,59.33,0,0,1,1.66,8.1,29.11,29.11,0,0,0,1.13,4.86l30,5.45c.52-3.6,1-7.11,1.23-8.65a61.18,61.18,0,0,1,1-6.43c.11-.52.73-3.12.73-3.64.1-.93,1.14-3.32.73-4.15S163.56,81.87,161.8,81.87Z" fill="#9d86be" />
				</g>
			</g>
		</g>
		<path fill="#9d86be" class="triangle" opacity="0" d="M75.54,166.64a7.7,7.7,0,0,1-2.38-.55,4.77,4.77,0,0,0-1.53-.42c-1.32-.22-2.72-.17-4-.51a.68.68,0,0,0-.33,0c-1.66-.25-1.49-1.44-.77-2.42.21-.3,3.74-4.46,4.59-5.27a8.67,8.67,0,0,0,1-1.53.69.69,0,0,1,.93-.34,1.54,1.54,0,0,1,1.07,1.28c.17,1.19,1.83,6.33,2.89,7.52a1.47,1.47,0,0,1,.17.72A1.42,1.42,0,0,1,75.54,166.64Zm-2.08-2.76c.43,0,.55-.21.43-.64-.18-.59-.35-1.19-.51-1.74s-.43-1.19-.64-1.74c-.17-.38-.39-.38-.64-.09l-2.68,3.19s0,0,0,.09c-.21.29-.13.51.21.55a28.37,28.37,0,0,0,3.15.38A4.25,4.25,0,0,0,73.46,163.88Z" />
		<g id="burst-1" opacity="0" class="hide">
			<path fill="#e2a3bd" d="M74.8,146a17.9,17.9,0,0,0,1.44-4.17,2.68,2.68,0,0,1,.13-.56.87.87,0,0,1,.9-.6.91.91,0,0,1,.8.83,1.18,1.18,0,0,1,0,.46c-.27.94-.47,1.91-.77,2.81-.4,1.09-.93,2.16-1.4,3.26a.92.92,0,0,1-.16.33c-.37.57-.74.71-1.3.37-.74-.43-3.8-1.2-4.44-1.53-.43-.23-.9-.4-1.33-.6A1,1,0,0,1,68,145.1c.06-.23.66-2.9,1-4a15.64,15.64,0,0,1,.77-2.34.66.66,0,0,1,.93-.16c.94.43,4,1.16,4.5,1.37.7.26.7.36.47,1.13s-.6,1.93-.87,2.77c-.1.33-.23.73-.36,1.06s-.27.67-1.1.54a10.37,10.37,0,0,1-1.37-.27c-1-.27-1.5-.43-1.13-1.4.23-.6.53-1.9.56-1.93.14-.34.2-.41.64-.44a.69.69,0,0,1,.8.5,1.52,1.52,0,0,1,0,.67,3.56,3.56,0,0,1-.16.53c-.07.2-.07.4.13.5a.5.5,0,0,0,.53,0,1.1,1.1,0,0,0,.47-.73,3.61,3.61,0,0,0,.13-.67c.14-.67,0-.9-.7-1.1s-1.33-.23-2-.37a.5.5,0,0,0-.6.37,25.87,25.87,0,0,0-.6,3.2c-.06.83.07,1.07.9,1.37.6.19,1.2.36,1.8.6a7,7,0,0,0,1.34.23A.69.69,0,0,0,74.8,146Z" />
			<path fill="#9d86be" d="M75.54,166.64a7.7,7.7,0,0,1-2.38-.55,4.77,4.77,0,0,0-1.53-.42c-1.32-.22-2.72-.17-4-.51a.68.68,0,0,0-.33,0c-1.66-.25-1.49-1.44-.77-2.42.21-.3,3.74-4.46,4.59-5.27a8.67,8.67,0,0,0,1-1.53.69.69,0,0,1,.93-.34,1.54,1.54,0,0,1,1.07,1.28c.17,1.19,1.83,6.33,2.89,7.52a1.47,1.47,0,0,1,.17.72A1.42,1.42,0,0,1,75.54,166.64Zm-2.08-2.76c.43,0,.55-.21.43-.64-.18-.59-.35-1.19-.51-1.74s-.43-1.19-.64-1.74c-.17-.38-.39-.38-.64-.09l-2.68,3.19s0,0,0,.09c-.21.29-.13.51.21.55a28.37,28.37,0,0,0,3.15.38A4.25,4.25,0,0,0,73.46,163.88Z" />
			<path fill="#b0bee2" d="M77.84,159.69a3.82,3.82,0,0,1-2.1,1,2.26,2.26,0,0,1-.9-.12c-1-.31-1.94-.77-2.16-2a2.74,2.74,0,0,1,1.14-3.55,2.89,2.89,0,0,1,2.78-.31c.41.16,2,.74,2,3.31A2.46,2.46,0,0,1,77.84,159.69Z" />
			<path fill="#96d1d1" d="M63.7,171.14a.91.91,0,0,1-1,.31,1.05,1.05,0,0,1-.77-.85,2.54,2.54,0,0,1,0-.78,9.57,9.57,0,0,1,.43-1.85,7.45,7.45,0,0,0,.23-1.2.49.49,0,0,0-.31-.54,1.94,1.94,0,0,0-.85-.28c-.58,0-1.16-.11-1.74-.19a.76.76,0,0,1-.81-.5,1.15,1.15,0,0,1,.23-1.16.73.73,0,0,1,.73-.19c.7.11,1.39.19,2.09.31a2.87,2.87,0,0,1,.58.07c.58,0,.73-.07.81-.62s.16-1.12.23-1.66a4.44,4.44,0,0,1,.12-.77.85.85,0,0,1,.77-.7,1,1,0,0,1,.93.74,2.22,2.22,0,0,1,0,.89c-.12.73-.19,1.47-.27,2.2a.47.47,0,0,0,.39.58,11.12,11.12,0,0,0,2.74.5,2.51,2.51,0,0,1,.78,0,1,1,0,0,1,.61,1.62c-.31.47-.5.7-1.31.43a14.89,14.89,0,0,0-3.13-.7c-.43-.07-.54,0-.66.43a9.55,9.55,0,0,0-.39,2.32A1.78,1.78,0,0,1,63.7,171.14Z" />
			<path fill="#efe5a7" d="M57.3,152.64A18.49,18.49,0,0,0,57,156a32.18,32.18,0,0,1-.25,3.63c-.12.56-.62.78-1.49.62s-3.47-.56-4.59-.65c-.77-.09-2.38-.43-3.25-.56-.56-.15-.78-.28-.93-.71a1.74,1.74,0,0,1-.06-1.21,26.15,26.15,0,0,0,.8-4.34c.13-1,.37-1.92.44-2.91a.9.9,0,0,1,1.14-.93c.75.06,1.49.18,2.23.31a20.74,20.74,0,0,0,3.82.4,12.47,12.47,0,0,1,1.52.12c.87.16,1.14.47,1.14,1.49C57.48,151.58,57.36,152.11,57.3,152.64Z" />
		</g>
		<path id="motion-path-1" opacity="0" class="hide" d="M1.3,73.65s46.4-3.93,71.34,88.58c0,0,26.91-120.07,74.8-2.07" fill="none" stroke="#a1d5d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
		<g id="flash" opacity="0" class="hide" clip-path="url(#clip-path-flash)">
			<line x1="153.79" y1="163.28" x2="168.67" y2="177.49" fill="none" stroke="#e2a3bd" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4" />
			<line x1="147.44" y1="165.57" x2="149.05" y2="185.48" fill="none" stroke="#e2a3bd" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4" />
			<line x1="141.31" y1="163.28" x2="131.32" y2="177.49" fill="none" stroke="#e2a3bd" stroke-linecap="round" stroke-miterlimit="10" stroke-width="4" />
		</g>
		<g id="burst-3" opacity="0" class="hide">
			<path fill="#a1d5d0" d="M215.16,99.77A4.64,4.64,0,0,1,213.28,98a1.7,1.7,0,0,1-.4-.76,5.18,5.18,0,0,1-.25-.89A4.7,4.7,0,0,1,213,94a6.34,6.34,0,0,1,2.14-2.32,5.82,5.82,0,0,1,4.19-.94c.16,0,.34.11.5.16a3,3,0,0,1,1.59.94,5.51,5.51,0,0,1,1,1.56,6.6,6.6,0,0,1,.33,1.75,3.26,3.26,0,0,1-.17,1,5.41,5.41,0,0,1-1.37,2.73c-.1.07-.17.17-.26.23a5.68,5.68,0,0,1-3.35,1A4.37,4.37,0,0,1,215.16,99.77Zm3.47-2.1a2.07,2.07,0,0,0,1.31-2,1.6,1.6,0,0,0-.53-1.17,3.78,3.78,0,0,0-.87-.63,1.33,1.33,0,0,0-1.15-.06,8.93,8.93,0,0,0-.83.39,2.22,2.22,0,0,0-1.15,2.43,2,2,0,0,0,2,1.34A1.72,1.72,0,0,0,218.63,97.67Z" />
			<path fill="#b0bee2" d="M199.54,64.52A6.85,6.85,0,0,1,202,63.2c.76-.2,1.22.16,1.09.94,0,.25,0,1.11,0,1.29-.1.43-.1.43-.61.51a2.66,2.66,0,0,0-1.79,1.34,2.87,2.87,0,0,0-.46,1.36,1.84,1.84,0,0,0,.56,1.55,2.18,2.18,0,0,0,1.26.81,1,1,0,0,1,.79,1.24c-.1.38-.2.76-.33,1.11a.55.55,0,0,1-.56.41,8.28,8.28,0,0,1-2.1-.89,2.93,2.93,0,0,1-1-1.09,7.93,7.93,0,0,1-.55-1,6.74,6.74,0,0,1-.18-3.79A4.25,4.25,0,0,1,199.54,64.52Z" />
			<path fill="#efe5a7" d="M201.14,91.79a.83.83,0,0,1-.49.48c-.65.14-5.47.28-6.09.38a1.63,1.63,0,0,1-1.94-1.52c0-.49,0-1,0-1.49,0-1.18-.45-4.57-.35-5.13a.89.89,0,0,1,.9-.79c.9,0,1.8-.21,2.7-.21a10.43,10.43,0,0,0,3.22-.48.84.84,0,0,1,1.07.27,2.09,2.09,0,0,1,.39.59c.1.28.17.59.27.87.25,1,.28,2.11.45,3.22A36.68,36.68,0,0,1,201.14,91.79Zm-2.91-2.15c.62-.07.83-.35.76-1,0-.1-.34-2.14-.38-2.25A.5.5,0,0,0,198,86c-.07,0-.14,0-.2,0a12.46,12.46,0,0,1-2.53.56c-.49.07-.63.31-.52.79.17.63.34,1.28.52,1.91s.24.62.65.62C196.78,89.78,197.5,89.74,198.23,89.64Z" />
			<path fill="#e2a3bd" d="M214.83,87.26a.76.76,0,0,1-.85.26.89.89,0,0,1-.66-.72,2.35,2.35,0,0,1,0-.65,9.18,9.18,0,0,1,.36-1.57,5,5,0,0,0,.2-1,.44.44,0,0,0-.26-.46,1.69,1.69,0,0,0-.72-.22c-.49,0-1-.1-1.47-.17a.65.65,0,0,1-.68-.42,1,1,0,0,1,.19-1,.65.65,0,0,1,.62-.16c.59.1,1.18.16,1.76.26a2.63,2.63,0,0,1,.49.06c.49,0,.62-.06.69-.52s.13-.94.2-1.4a4.08,4.08,0,0,1,.09-.65.72.72,0,0,1,.65-.59.88.88,0,0,1,.79.62,2.1,2.1,0,0,1,0,.75c-.1.62-.17,1.24-.23,1.86a.39.39,0,0,0,.33.49,9.13,9.13,0,0,0,2.31.42,2,2,0,0,1,.65,0,.82.82,0,0,1,.53,1.36c-.27.4-.43.59-1.11.36a12.81,12.81,0,0,0-2.65-.58c-.35-.07-.45,0-.55.36a8,8,0,0,0-.33,2A1.5,1.5,0,0,1,214.83,87.26Z" />
		</g>

		<g id="s">
			<path id="movement-1" class="movement" opacity="0" d="M87.11,159.46s10.64,11.3,23.61,9.3,16.3-8,18.79-12,1.79-9.39,1.81-9.68" fill="none" stroke="#97d2d2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" />
			<path id="movement-2" class="movement" opacity="0" stroke-width="2" d="M100.41,134s-18.23-13-23.25-23.45-2.8-18.62,0-22.45,12.11-7.24,18.43-6.45" fill="none" stroke="#afbee2" stroke-linecap="round" stroke-miterlimit="10" />
			<g clip-path="url(#clip-path-2)">
				<path id="s-path" d="M93.8,138.55s-1.69,21.85,13,20.91,13.8-4.64,14.64-6.87,1.69-8.11-3.09-14-18.77-17.81-21.68-20.63-9.58-5.86-10.7-16.56,11.24-11.54,14.49-10.7,7.84.94,10.89,16.38" fill="none" stroke="#575060" stroke-linecap="round" stroke-miterlimit="10" stroke-width="16" />
			</g>
		</g>
		<g id="burst-2" opacity="0" class="hide">
			<path d="M220.51,149.57a9.18,9.18,0,0,0-1.36.23,23.81,23.81,0,0,1-5,.83,2.3,2.3,0,0,0-1.6.53c.06.78.71,1,1.24,1.25,1.54,1,3.14,2,4.74,3,.41.29.71.23.95-.3.53-1.54,1.06-3,1.59-4.5.07-.17,0-.35.07-.47C221,149.8,220.81,149.57,220.51,149.57Z" fill="#9d86be" />
			<path d="M224.88,146a.58.58,0,0,1-.64.2.68.68,0,0,1-.5-.55,2,2,0,0,1,0-.49A6.53,6.53,0,0,1,224,144a3.49,3.49,0,0,0,.15-.77.32.32,0,0,0-.2-.35,1.43,1.43,0,0,0-.54-.17c-.37,0-.74-.07-1.11-.12a.49.49,0,0,1-.52-.32.74.74,0,0,1,.15-.74.48.48,0,0,1,.47-.13c.44.08.89.13,1.33.2a1.5,1.5,0,0,1,.37,0c.37,0,.47,0,.52-.4s.1-.71.15-1.06a2.52,2.52,0,0,1,.07-.49.56.56,0,0,1,.5-.45.68.68,0,0,1,.59.47,1.56,1.56,0,0,1,0,.57c-.08.47-.12.94-.17,1.41a.29.29,0,0,0,.24.37,7,7,0,0,0,1.76.32,1.58,1.58,0,0,1,.49,0,.62.62,0,0,1,.4,1c-.2.3-.33.45-.84.27a10.09,10.09,0,0,0-2-.44c-.28,0-.35,0-.42.27a5.66,5.66,0,0,0-.25,1.48A1.13,1.13,0,0,1,224.88,146Z" fill="#96d1d1" />
			<path d="M228.78,152.07a1.93,1.93,0,0,1-1.05.51,1,1,0,0,1-.45-.06c-.51-.16-1-.39-1.08-1a1.37,1.37,0,0,1,.57-1.78,1.44,1.44,0,0,1,1.39-.15,1.54,1.54,0,0,1,1,1.65A1.23,1.23,0,0,1,228.78,152.07Z" fill="#b0bee2" />
			<path d="M233.92,144.6a1.47,1.47,0,0,1-.64.34,1.06,1.06,0,0,1-.47,0c-.35-.11-.66-.27-.74-.68a1,1,0,0,1,.41-1.27,1,1,0,0,1,1-.11,1.12,1.12,0,0,1,.71,1.18A.93.93,0,0,1,233.92,144.6Z" fill="#e2a3bd" />
		</g>

		<path id="motion-path-2" opacity="0" class="hide" d="M207.44,161.68s15.86-80.24,74.72-92.95" fill="none" stroke="#b0bee2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
	</g>
</svg>
              
            
!

CSS

              
                body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

svg {
	width: 80vw;
	max-width: 600px;
	overflow: visible;
}

#hide-flash {
	animation: show 0.1s forwards 1s;
}

@keyframes show {
	to {
		opacity: 1;
	}
}

              
            
!

JS

              
                gsap.registerPlugin(MotionPathPlugin, DrawSVGPlugin);

gsap.set(".hide", { opacity: 1 });

gsap.set("#s-path", { drawSVG: "0 4%" });

gsap.set(["#motion-path-1", "#flash line", ".movement", ".movement2"], {
	drawSVG: "0% 0%"
});

gsap.set("#motion-path-2", {
	drawSVG: "100% 100%"
});

gsap.set(["#burst-1 path", "#burst-2 path", "#burst-3 path"], {
	transformOrigin: "center",
	opacity: 0,
	scale: 0.3
});

gsap.set(".triangle", {
	scale: 0.5,
	transformOrigin: "center"
});

gsap.set("#v", {
	transformOrigin: "bottom center"
});

function s() {
	const s = gsap.timeline();
	s.from("#s", {
		scale: 0,
		motionPath: {
			path: "#motion-path-1",
			align: "#motion-path-1",
			alignOrigin: [0.3, 0.7],
			start: 0.5,
			end: 0
		},
		rotation: -40,
		duration: 0.5,
		ease: "expo.out"
	})
		.to(
			"#motion-path-1",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ drawSVG: "20% 40%", duration: 0.2 },
					{ drawSVG: "40% 40%", duration: 0.2 },
					{ opacity: 0, duration: 0.01 }
				]
			},
			0
		)
		.to(
			"#s",
			{
				keyframes: [
					{ duration: 0.1, scaleY: 0.4 },
					{ duration: 0.1, scaleY: 1 }
				]
			},
			0.11
		)
		.to(
			"#s",
			{
				y: 0,
				x: 0,
				duration: 0.2
			},
			0.35
		)
		.to(
			"#s",
			{
				keyframes: [
					{ rotation: -30, duration: 0.3, ease: "back.out(1.7)" },
					{ rotation: 0, duration: 2, ease: "elastic.out(1, 0.5)" }
				]
			},
			0.35
		)
		.to(
			"#s-path",
			{
				drawSVG: "100%",
				duration: 0.7,
				ease: "sine.out"
			},
			0.5
		)
		.to(
			"#movement-1",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ drawSVG: "20% 50%", duration: 0.2 },
					{ drawSVG: "100% 100%", duration: 0.2 },
					{ opacity: 0, duration: 0.01 }
				]
			},
			0.5
		)
		.to(
			"#movement-2",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ drawSVG: "20% 50%", duration: 0.2 },
					{ drawSVG: "100% 100%", duration: 0.2 },
					{ opacity: 0, duration: 0.01 }
				]
			},
			0.7
		);

	return s;
}

function burstOne() {
	const burst = gsap.timeline();

	burst.to("#burst-1 path", {
		keyframes: [
			{ opacity: 1, duration: 0.01 },
			{
				x: "random(-50, 20)",
				y: "random(-50, -10)",
				duration: 0.3,
				rotation: "random(-90, -300)",
				scale: 0.8
			},
			{ opacity: 0, duration: 0.06 }
		],
		stagger: {
			amount: 3
		},
		duration: 1
	});
	return burst;
}

function burstTwo() {
	const burst = gsap.timeline();

	burst.to("#burst-2 path", {
		keyframes: [
			{ opacity: 1, duration: 0.01 },
			{
				x: "random(0, 20)",
				y: "random(-40, -10)",
				duration: 1,
				rotation: "random(-300, -300)",
				scale: 1
			},
			{ opacity: 0, duration: 0.2, delay: -0.2 }
		],
		stagger: {
			amount: 3
		},
		duration: 1
	});
	return burst;
}

function burstThree() {
	const burst = gsap.timeline();

	burst.to("#burst-3 path", {
		keyframes: [
			{ opacity: 1, duration: 0.01 },
			{
				x: "random(-20, 40)",
				y: "random(-50, -10)",
				duration: 1,
				rotation: "random(-180, -180)",
				scale: 1
			},
			{ opacity: 0, duration: 0.2, delay: -0.2 }
		],
		stagger: {
			amount: 3
		},
		duration: 0.7
	});
	return burst;
}

function v() {
	const v = gsap.timeline();

	v.to(".triangle", {
		scale: 1,
		motionPath: {
			path: "#motion-path-1",
			align: "#motion-path-1",
			alignOrigin: [0.3, 0.7],
			start: 0.5,
			end: 1
		},
		rotation: -40,
		duration: 0.8
	})
		.to(
			".triangle",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ opacity: 0, duration: 0.01, delay: 0.6 }
				]
			},
			"<"
		)
		.to(
			"#flash line",
			{
				keyframes: [
					{ drawSVG: "20% 50%", duration: 0.1 },
					{ drawSVG: "100% 100%", duration: 0.1 }
				]
			},
			">"
		)
		.from(
			"#v",
			{
				scale: 0,
				duration: 0.7,
				// ease: "elastic.Out(1, 0.5)",
				ease: "back.out(2)",
				rotation: 20
			},
			"<"
		);

	return v;
}

function g() {
	const g = gsap.timeline();

	g.to(
		"#motion-path-2",
		{
			keyframes: [
				{ opacity: 1, duration: 0.01 },
				{ drawSVG: "50% 90%", duration: 0.2 },
				{ drawSVG: "0% 0%", duration: 0.2 },
				{ opacity: 0, duration: 0.01 }
			]
		},
		0
	).from(
		"#g",
		{
			transformOrigin: "center",
			scale: 0,
			duration: 0.5,
			ease: "expo.out",
			motionPath: {
				path: "#motion-path-2",
				align: "#motion-path-2",
				alignOrigin: [0.7, 0.8],
				autoRotate: 80,
				start: 0,
				end: 1
			}
		},
		"<"
	);
	g.to(
		"#g",
		{
			keyframes: [
				{
					scaleY: 0.6,
					duration: 0.3,
					transformOrigin: "bottom center"
				},
				{
					scaleY: 1,
					duration: 0.6,
					ease: "back.out(4)",
					transformOrigin: "bottom center"
				}
			]
		},
		">-0.4"
	);
	g.to(
		"#g-shape",
		{
			opacity: 0,
			duration: 0.1
		},
		"<+0.1"
	)
		.to(
			"#movement-3",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ drawSVG: "20% 50%", duration: 0.2 },
					{ drawSVG: "100% 100%", duration: 0.2 },
					{ opacity: 0, duration: 0.01 }
				]
			},
			0.5
		)
		.to(
			"#movement-4",
			{
				keyframes: [
					{ opacity: 1, duration: 0.01 },
					{ drawSVG: "20% 50%", duration: 0.2 },
					{ drawSVG: "100% 100%", duration: 0.2 },
					{ opacity: 0, duration: 0.01 }
				]
			},
			"<"
		);

	return g;
}

const main = gsap.timeline({ delay: 2 });
main.add(s().timeScale(0.9));
main.add(burstOne(), 0.1);
main.add(v().timeScale(1.1), 0.2);
main.add(g(), 0.7);
main.add(burstTwo(), 1);
main.add(burstThree(), 1.5);

// ScrubGSAPTimeline(main);

              
            
!
999px

Console