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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve">
<g id="logo-cadre-elements">
	<g class="element">
		<polygon points="139.5,10.7 139.5,22.5 141.5,21.9 141.5,8.9 139.3,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="60.8,138.7 61.1,140.7 69.5,140.7 69.2,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="35.1,138.7 33.4,140.7 44.1,140.7 42.7,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="76.3,138.7 78.1,140.7 94.5,140.7 91.5,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,138.7 139.4,138.7 141.5,140.7 141.5,128.9 139.5,129.4 		"/>
	</g>
	<g class="element">
		<polygon points="104.1,138.7 104.1,140.7 123.5,140.7 121.5,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="132.6,10.7 134,8.7 128.3,8.7 127.7,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="83.3,10.7 84.8,8.7 77.5,8.7 77.5,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="109.1,10.7 110.3,8.7 96.9,8.7 93.8,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="123.1,10.7 123.7,8.7 116.2,8.7 115.4,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="15.4,138.7 13.5,140.7 25.3,140.7 26.9,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,10.7 14.2,10.7 12.5,8.7 9.5,8.7 9.5,16 11.5,16 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,54.4 141.5,56 141.5,48.3 139.5,49.8 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,68.4 141.5,68.8 141.5,61 139.5,63.2 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,39.3 141.5,40 141.5,28.8 139.5,29.9 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,123.7 141.5,123.7 141.5,116.6 139.5,117.1 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,104.3 141.5,105.2 141.5,99.3 139.5,100.9 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,87.7 141.5,87.7 141.5,76.2 139.5,77.2 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,115.3 9.5,114 9.5,121 11.5,121.4 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,106.3 9.5,105.7 9.5,106.9 11.5,108.5 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,121.4 9.5,123.4 9.5,135.9 11.5,133.1 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,74.3 9.5,74.1 9.5,83.6 11.5,82.9 		"/>
	</g>
	<g class="element">
		<polygon points="20.3,10.7 21.6,8.7 15.8,8.7 15.8,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="36.9,10.7 37.4,8.7 30.5,8.7 29.2,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="50.7,138.7 52.3,140.7 57,140.7 58,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,20.7 9.5,21.2 9.5,31.6 11.5,30.9 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,50.1 9.5,50.2 9.5,61.8 11.5,61.3 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,36.6 9.5,35.3 9.5,42.2 11.5,41.6 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,91.7 9.5,89.9 9.5,98.1 11.5,97.3 		"/>
	</g>
	<g class="element">
		<polygon points="50.9,10.7 54.1,8.7 44.8,8.7 44.1,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="71.8,10.7 71.8,8.7 64,8.7 64.2,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="77.5,10.7 77.5,8.7 71.8,8.7 71.8,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="58,138.7 57,140.7 61.1,140.7 60.8,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="42.7,138.7 44.1,140.7 52.3,140.7 50.7,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="69.2,138.7 69.5,140.7 78.1,140.7 76.3,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="9.5,121 9.5,123.4 11.5,121.4 		"/>
	</g>
	<g class="element">
		<polygon points="26.9,138.7 25.3,140.7 33.4,140.7 35.1,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="91.5,138.7 94.5,140.7 104.1,140.7 104.1,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,138.7 11.5,133.1 9.5,135.9 9.5,140.7 13.5,140.7 15.4,138.7 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,100.9 141.5,99.3 141.5,87.7 139.5,87.7 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,63.2 141.5,61 141.5,56 139.5,54.4 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,49.8 141.5,48.3 141.5,40 139.5,39.3 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,77.2 141.5,76.2 141.5,68.8 139.5,68.4 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,108.5 9.5,106.9 9.5,114 11.5,115.3 		"/>
	</g>
	<g class="element">
		<polygon points="141.5,140.7 139.4,138.7 121.5,138.7 123.5,140.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,97.3 9.5,98.1 9.5,105.7 11.5,106.3 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,117.1 141.5,116.6 141.5,105.2 139.5,104.3 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,129.4 141.5,128.9 141.5,123.7 139.5,123.7 		"/>
	</g>
	<g class="element">
		<polygon points="44.1,10.7 44.8,8.7 37.4,8.7 36.9,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="64.2,10.7 64,8.7 54.1,8.7 50.9,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="115.4,10.7 116.2,8.7 110.3,8.7 109.1,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="93.8,10.7 96.9,8.7 84.8,8.7 83.3,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="139.5,29.9 141.5,28.8 141.5,21.9 139.5,22.5 		"/>
	</g>
	<g class="element">
		<polygon points="139.3,10.7 141.5,8.9 141.5,8.7 134,8.7 132.6,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,82.9 9.5,83.6 9.5,89.9 11.5,91.7 		"/>
	</g>
	<g class="element">
		<polygon points="127.7,10.7 128.3,8.7 123.7,8.7 123.1,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,41.6 9.5,42.2 9.5,50.2 11.5,50.1 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,61.3 9.5,61.8 9.5,74.1 11.5,74.3 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,30.9 9.5,31.6 9.5,35.3 11.5,36.6 		"/>
	</g>
	<g class="element">
		<polygon points="11.5,16 9.5,16 9.5,21.2 11.5,20.7 		"/>
	</g>
	<g class="element">
		<polygon points="29.2,10.7 30.5,8.7 21.6,8.7 20.3,10.7 		"/>
	</g>
	<g class="element">
		<polygon points="15.8,10.7 15.8,8.7 12.5,8.7 14.2,10.7 		"/>
	</g>
</g>
<g id="logo-z-elements">
	<g class="element">
		<path d="M64.2,61.8l-0.1-6.6l0,0c-1.1,0.1-2.1,0.3-3.2,0.4h-0.1c-1,0.2-2,0.4-3,0.5l0,0l-1.4,5.1L64.2,61.8z"/>
	</g>
	<g class="element">
		<path d="M69.2,57.3l1.4-2.6l0,0c-0.8,0-1.5,0.1-2.2,0.1c-0.4,0-0.8,0-1.1,0.1c-1,0.1-2.1,0.2-3.1,0.3l0,0l0.1,6.6L69.2,57.3z"/>
	</g>
	<g class="element">
		<path d="M75.3,61.8l3.3-7.1l0,0c-0.6,0-1.3-0.1-1.9-0.1c-0.7,0-1.4,0-2.2,0c-1.3,0-2.6,0-3.9,0.1l-1.4,2.6L75.3,61.8z"/>
	</g>
	<g class="element">
		<path d="M50.9,84.9l-1.4-6.6l0,0c-0.4,0.2-0.8,0.4-1.1,0.7c-0.1,0-0.1,0.1-0.2,0.1c-0.3,0.2-0.6,0.4-0.9,0.6
			c-0.1,0.1-0.2,0.1-0.3,0.2c-0.3,0.2-0.5,0.4-0.8,0.6c-0.1,0.1-0.2,0.1-0.2,0.2c-0.3,0.3-0.6,0.5-0.9,0.8l0,0
			c-0.3,0.3-0.6,0.6-0.9,0.9l-0.1,0.1c-0.2,0.3-0.5,0.5-0.7,0.8c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.2-0.4,0.5-0.6,0.8
			c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.3-0.5,0.6-0.7,1l3,2.2L50.9,84.9z"/>
	</g>
	<g class="element">
		<polygon points="67.2,110.7 65.2,113.7 72.3,115.3 77.5,108.5 		"/>
	</g>
	<g class="element">
		<path d="M88.3,63.2l5.1-5.9c-0.3-0.1-0.6-0.2-0.9-0.3s-0.7-0.2-1-0.3c-0.6-0.2-1.2-0.3-1.8-0.5c-0.1,0-0.1,0-0.2,0
			c-1.3-0.3-2.7-0.6-4.2-0.8l0,0L87,61L88.3,63.2z"/>
	</g>
	<g class="element">
		<path d="M56.5,61.3l2.7,4.9l0,0c1.1-0.2,2.2-0.4,3.3-0.6c0.1,0,0.2,0,0.3,0c1.1-0.2,2.3-0.3,3.5-0.5l-2.2-3.2L56.5,61.3z"/>
	</g>
	<g class="element">
		<path d="M44.8,87.7l-3-2.2c-0.2,0.3-0.4,0.7-0.6,1l0,0c-0.2,0.3-0.4,0.7-0.5,1c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.3-0.3,0.6-0.4,0.9
			c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.3-0.2,0.6-0.3,0.9v0.1c-0.5,1.5-0.8,3.1-0.8,4.7l7.4,2.8L44.8,87.7z"/>
	</g>
	<g class="element">
		<path d="M47.5,64.9l4.1,3.4l0,0c1.7-0.6,3.5-1.1,5.4-1.6c0.1,0,0.2-0.1,0.4-0.1c0.6-0.1,1.3-0.3,1.9-0.4l0,0l-2.7-4.9L47.5,64.9z"
			/>
	</g>
	<g class="element">
		<path d="M64.2,61.8l2.2,3.2c0.7-0.1,1.3-0.1,2-0.2s1.4-0.1,2.2-0.1l-1.3-7.5L64.2,61.8z"/>
	</g>
	<g class="element">
		<path d="M69.2,57.3l1.3,7.5l0,0c0.4,0,0.7,0,1.1,0c0.9,0,1.9-0.1,2.9-0.1c0.5,0,1.1,0,1.6,0l-0.8-2.8L69.2,57.3z"/>
	</g>
	<g class="element">
		<path d="M41,61.8L41,61.8c-0.4,0.2-0.9,0.4-1.3,0.6c0,0-0.1,0-0.1,0.1c-0.8,0.4-1.5,0.8-2.2,1.2l0,0c-0.3,0.2-0.6,0.4-0.9,0.5
			c-0.1,0.1-0.3,0.1-0.4,0.2c-0.4,0.2-0.7,0.4-1,0.6c-0.2,0.1-0.5,0.3-0.7,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.3,0.2-0.6,0.4-0.9,0.6
			L33,66.4l2.4,3.4l5.5-4.9L41,61.8z"/>
	</g>
	<g class="element">
		<path d="M40.8,64.9l2.7,6.8l0,0c0.5-0.3,1.1-0.6,1.7-0.8c0,0,0,0,0.1,0c1.8-0.9,3.9-1.7,6.2-2.5l0,0L47.4,65L40.8,64.9L40.8,64.9z
			"/>
	</g>
	<g class="element">
		<path d="M47.5,64.9l0.5-6c-0.6,0.2-1.1,0.4-1.7,0.6c-0.1,0.1-0.3,0.1-0.4,0.2c-0.5,0.2-1.1,0.4-1.6,0.6l0,0
			c-1.2,0.5-2.2,1-3.3,1.4l0,0l-0.2,3.1L47.5,64.9L47.5,64.9z"/>
	</g>
	<g class="element">
		<path d="M56.5,61.3l1.4-5.1l0,0c-3.7,0.7-7,1.7-9.9,2.7l-0.5,6L56.5,61.3z"/>
	</g>
	<g class="element">
		<path d="M35.3,69.8l3.3,4.8l0.1-0.1c1.1-0.8,2.7-1.8,4.8-2.9l0,0l-2.7-6.8L35.3,69.8z"/>
	</g>
	<g class="element">
		<path d="M93.8,110.7l3.4,1.1l0,0c0.4-0.2,0.8-0.4,1.2-0.6c0.1,0,0.2-0.1,0.3-0.1c0.3-0.2,0.7-0.4,1-0.5c0.1-0.1,0.2-0.1,0.3-0.2
			c0.3-0.2,0.6-0.4,0.9-0.6c0.1-0.1,0.2-0.1,0.3-0.2c0.4-0.3,0.8-0.5,1.2-0.8l-2.2-6.4L93.8,110.7z"/>
	</g>
	<g class="element">
		<path d="M92.5,113.7c1-0.3,1.9-0.7,2.9-1.1c0.1,0,0.1-0.1,0.2-0.1c0.5-0.2,1-0.5,1.6-0.7l0,0l-3.4-1.1l-6.9,0.4l0.5,4
			c0.5-0.1,1-0.2,1.5-0.4c0.7-0.2,1.3-0.3,2-0.5c0.4-0.1,0.9-0.3,1.4-0.4C92.3,113.8,92.4,113.7,92.5,113.7z"/>
	</g>
	<g class="element">
		<path d="M65.2,113.7l-1.8,2.6l0,0c0.6,0.1,1.2,0.2,1.9,0.2c0.1,0,0.2,0,0.3,0c0.5,0.1,1.1,0.1,1.6,0.1c0.2,0,0.4,0,0.5,0
			c0.5,0,1,0.1,1.6,0.1c0.2,0,0.4,0,0.6,0c0.7,0,1.5,0,2.2,0h0.1v-1.6L65.2,113.7z"/>
	</g>
	<g class="element">
		<path d="M75.3,61.8l0.8,2.8c0.6,0,1.2,0,1.9,0.1c0,0,0,0,0.1,0c0.6,0,1.2,0.1,1.8,0.1l0,0c0.6,0.1,1.2,0.1,1.8,0.2l0,0
			c0.6,0.1,1.1,0.1,1.7,0.2L87,61L75.3,61.8z"/>
	</g>
	<g class="element">
		<path d="M72.3,115.3v1.6l0,0c0.6,0,1.1,0,1.7,0c0.3,0,0.7,0,1,0s0.6,0,0.9,0c0.4,0,0.8-0.1,1.3-0.1c0.2,0,0.4,0,0.7-0.1
			c0.5,0,1-0.1,1.4-0.1c0.1,0,0.3,0,0.4,0c2.4-0.3,5-0.7,7.7-1.3l-0.5-4L72.3,115.3z"/>
	</g>
	<g class="element">
		<path d="M100.3,102.3l2.2,6.4c0.6-0.4,1.2-0.8,1.8-1.3c0.1,0,0.1-0.1,0.2-0.1c0.6-0.4,1.1-0.9,1.7-1.3c0.1-0.1,0.1-0.1,0.2-0.2
			c0.6-0.5,1.1-1,1.6-1.5l0.1-0.1c0.5-0.5,1.1-1.1,1.6-1.7l-2.8-3.2L100.3,102.3z"/>
	</g>
	<g class="element">
		<path d="M106.9,99.3l2.8,3.2c0.4-0.5,0.8-0.9,1.2-1.4c0-0.1,0.1-0.1,0.1-0.2c0.8-1,1.5-2,2.1-3c0-0.1,0.1-0.1,0.1-0.2
			c0.6-1.1,1.2-2.2,1.7-3.4c0,0,0-0.1,0.1-0.1c0.5-1.2,0.9-2.4,1.2-3.7v-0.1c0.1-0.6,0.3-1.3,0.4-2l0,0l-7.5,3.2L106.9,99.3z"/>
	</g>
	<g class="element">
		<path d="M112.7,83.6l4-0.6l0,0c-0.2-2.2-0.7-4.4-1.5-6.6l0,0l-5.8,1.3L112.7,83.6z"/>
	</g>
	<g class="element">
		<path d="M109.1,91.7l7.5-3.2l0,0c0.1-0.5,0.1-1,0.2-1.5c0,0,0,0,0-0.1c0-0.5,0.1-1.1,0.1-1.6c0-0.4,0-0.8,0-1.2
			c0-0.4,0-0.7-0.1-1.1l0,0l-4,0.6L109.1,91.7z"/>
	</g>
	<g class="element">
		<path d="M44.1,104.3l-2.1,1l0,0c0.3,0.4,0.5,0.8,0.8,1.1l0,0c0.3,0.4,0.6,0.7,0.9,1.1l0,0c0.3,0.3,0.6,0.7,1,1l0,0
			c0.3,0.3,0.7,0.7,1.1,1l5-3.3L44.1,104.3z"/>
	</g>
	<g class="element">
		<path d="M109.1,72.8l3.5-1.5l0,0c-0.3-0.4-0.6-0.9-0.9-1.3l0,0c-0.3-0.4-0.6-0.8-0.9-1.2l0,0c-0.3-0.4-0.7-0.8-1-1.2l0,0
			c-1.8-2-3.9-3.9-6.4-5.5l0,0l-1.3,5.8L109.1,72.8z"/>
	</g>
	<g class="element">
		<path d="M46.3,97.3l-7.4-2.8c0,0.2,0,0.5,0,0.7c0,0.4,0,0.9,0.1,1.3c0,0.1,0,0.2,0,0.3c0,0.3,0.1,0.7,0.1,1c0,0.1,0,0.2,0,0.3
			c0.1,0.4,0.1,0.7,0.2,1c0,0.1,0,0.1,0.1,0.2c0.1,0.4,0.2,0.7,0.3,1.1v0.1c0.1,0.4,0.3,0.8,0.4,1.2c0,0,0,0,0,0.1
			c0.2,0.4,0.3,0.8,0.5,1.2l0,0c0.4,0.8,0.8,1.6,1.4,2.3l0,0l2.1-1L46.3,97.3z"/>
	</g>
	<g class="element">
		<path d="M102.1,67.8l1.3-5.8l0,0c-1.6-1.1-3.4-2.1-5.4-2.9l0,0l-0.2,4.2L102.1,67.8z"/>
	</g>
	<g class="element">
		<path d="M97.8,63.2L98,59l0,0c-0.7-0.3-1.4-0.6-2.1-0.9c-0.1,0-0.1,0-0.2-0.1c-0.7-0.3-1.5-0.6-2.3-0.8l-5.1,5.9L97.8,63.2
			L97.8,63.2z"/>
	</g>
	<g class="element">
		<path d="M50.9,106.3l-5,3.3c0.6,0.5,1.2,0.9,1.8,1.4c0,0,0.1,0.1,0.2,0.1c0.6,0.4,1.3,0.8,2,1.2c0.7,0.4,1.5,0.8,2.1,1.1
			c0.1,0,0.2,0.1,0.3,0.1c0.3,0.1,0.6,0.2,1,0.4l-0.3-2.8L50.9,106.3z"/>
	</g>
	<g class="element">
		<path d="M61.1,112.8l-8-1.7l0.3,2.8c0.2,0.1,0.5,0.2,0.8,0.3h0.1c0.3,0.1,0.6,0.2,0.9,0.3c0,0,0,0,0.1,0c2,0.6,4.9,1.3,8.4,1.8
			l0,0l1.8-2.6L61.1,112.8z"/>
	</g>
	<g class="element">
		<path d="M109.1,77.2l0.3,0.5l5.8-1.3l0,0c-0.2-0.4-0.3-0.9-0.5-1.3l0,0c-0.2-0.4-0.4-0.9-0.6-1.3l0,0c-0.2-0.4-0.4-0.8-0.7-1.3
			l0,0c-0.2-0.4-0.5-0.8-0.7-1.2l0,0l-3.5,1.5v4.4C109.2,77.2,109.1,77.2,109.1,77.2z"/>
	</g>
	<g class="element">
		<path d="M86.9,61l-1.7-5.6l0,0c-2.1-0.3-4.3-0.6-6.7-0.7l0,0l-3.3,7.1L86.9,61z"/>
	</g>
	<g class="element">
		<path d="M75.6,90.8L75.6,90.8c0.3,0.5,0.6,0.9,0.7,1.3l0,0l3.8-0.4l-2-6.8l-3.3,4.8C75,90,75.3,90.4,75.6,90.8z"/>
	</g>
	<g class="element">
		<path d="M73.1,88.2L73.1,88.2c0.6,0.5,1.2,1,1.7,1.5l3.3-4.8l-5.7-1.3L71,86.9C71.8,87.2,72.4,87.7,73.1,88.2z"/>
	</g>
	<g class="element">
		<path d="M70,86.4C70,86.4,70.1,86.4,70,86.4c0.4,0.2,0.7,0.3,1,0.5l1.3-3.2l-2.6-4.8L69,86C69.4,86.1,69.7,86.2,70,86.4z"/>
	</g>
	<g class="element">
		<path d="M61.1,85c0.1,0,0.1,0,0.2,0c0.6-0.1,1.1-0.1,1.7-0.1c0.5,0,1,0,1.5,0.1c0.1,0,0.2,0,0.3,0c0.4,0,0.8,0.1,1.2,0.2
			c0.1,0,0.2,0,0.2,0c0.4,0.1,0.9,0.2,1.3,0.3h0.1c0.5,0.1,0.9,0.3,1.4,0.4l0.8-7.1l-5.6,1.6L59,81.9l0.5,3.3
			C60,85.1,60.5,85.1,61.1,85z"/>
	</g>
	<g class="element">
		<path d="M76.3,92.1c0.1,0.2,0.1,0.3,0.2,0.5c0.1,0.1,0.1,0.3,0.1,0.4s0.1,0.3,0.1,0.4c0,0.2,0.1,0.4,0.1,0.5s0,0.2,0.1,0.4
			c0,0.3,0.1,0.6,0.1,0.9c0,0.4,0,0.7-0.1,1.1c0,0.1,0,0.2-0.1,0.3c0,0.3-0.1,0.5-0.2,0.8c0,0.1-0.1,0.2-0.1,0.2
			c-0.1,0.3-0.2,0.5-0.3,0.8c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.3-0.3,0.5-0.4,0.8c0,0,0,0.1-0.1,0.1c-0.2,0.3-0.4,0.6-0.6,0.8l0,0
			c-0.2,0.3-0.5,0.6-0.7,0.8l0,0c-0.5,0.6-1.2,1.1-1.8,1.5l0,0l4.9,5.8v-6.2l5.8-8L80,91.6L76.3,92.1L76.3,92.1z"/>
	</g>
	<g class="element">
		<path d="M77.5,108.5l-5.1,6.8l14.6-4.2l-3.3-5.4c0.3-0.4,0.6-0.9,0.8-1.3c0.1-0.1,0.1-0.2,0.2-0.3c0.2-0.4,0.4-0.7,0.6-1.1
			c0-0.1,0.1-0.2,0.1-0.2c0.2-0.4,0.4-0.8,0.5-1.3v-0.1c0.2-0.5,0.3-1,0.5-1.5l-8.9,2.4C77.5,102.3,77.5,108.5,77.5,108.5z"/>
	</g>
	<g class="element">
		<path d="M64.6,105.4c-0.6,0.1-1.1,0.1-1.7,0.1c-1.3,0-2.6-0.2-4-0.5c-0.2,0-0.3-0.1-0.4-0.1l0.6,3.6l8.2,2.2L64.6,105.4
			L64.6,105.4z"/>
	</g>
	<g class="element">
		<path d="M72.6,102.7c-1,0.7-2.2,1.3-3.5,1.8c-0.1,0-0.1,0-0.2,0.1c-0.3,0.1-0.6,0.2-0.9,0.3c-0.1,0-0.1,0-0.2,0.1
			c-1,0.3-2.1,0.5-3.2,0.6l0,0l2.6,5.3l10.2-2.2L72.6,102.7L72.6,102.7z"/>
	</g>
	<g class="element">
		<path d="M49.1,97.3c-0.1-0.3-0.2-0.7-0.2-1c-0.1-0.4-0.1-0.7-0.1-1.1c0-0.3,0-0.6,0.1-0.9c0-0.1,0-0.2,0-0.3
			c0-0.2,0.1-0.4,0.1-0.6c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.2-0.5,0.3-0.7c0-0.1,0-0.1,0.1-0.2c0.1-0.3,0.3-0.5,0.4-0.8
			c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.2,0.3-0.3,0.4-0.5c0.1-0.1,0.1-0.2,0.2-0.3l0,0
			l-6.5-1.7l1.5,9.6L49.1,97.3L49.1,97.3z"/>
	</g>
	<g class="element">
		<path d="M58.4,104.9L58.4,104.9c-0.5-0.1-0.9-0.2-1.3-0.4c0,0,0,0-0.1,0c-0.4-0.1-0.8-0.3-1.1-0.5l0,0h-0.1
			c-0.3-0.1-0.6-0.3-0.9-0.4l-0.2-0.1c-0.5-0.2-0.9-0.5-1.3-0.8l-2.5,3.6l2.2,4.8l6-2.6L58.4,104.9z"/>
	</g>
	<g class="element">
		<path d="M53.2,102.6c-0.3-0.2-0.6-0.5-0.9-0.7c-0.2-0.2-0.4-0.3-0.6-0.5c-0.1-0.1-0.2-0.2-0.3-0.3c-0.2-0.2-0.4-0.5-0.6-0.7
			l-0.1-0.1c-0.2-0.3-0.4-0.6-0.6-0.9l0,0l-6,4.9l6.8,2l2.5-3.6C53.3,102.7,53.3,102.7,53.2,102.6z"/>
	</g>
	<g class="element">
		<polygon points="59,108.5 53,111.1 61.1,112.8 65.2,113.7 67.2,110.7 		"/>
	</g>
	<g class="element">
		<path d="M50.1,99.4c-0.2-0.3-0.4-0.7-0.5-1l0,0c-0.2-0.3-0.3-0.7-0.4-1l0,0h-2.9l-2.2,7L50.1,99.4L50.1,99.4z"/>
	</g>
	<g class="element">
		<path d="M51.3,89.4c0.3-0.3,0.6-0.6,0.9-0.8l0,0c0.3-0.3,0.6-0.5,1-0.8l0,0l-2.3-2.9l-6.1,2.8L51.3,89.4L51.3,89.4z"/>
	</g>
	<g class="element">
		<path d="M53.2,87.8c0.6-0.5,1.3-0.9,2.1-1.2l0,0c0.4-0.2,0.8-0.3,1.2-0.5l0,0c0.4-0.2,0.8-0.3,1.2-0.4l-3.5-6l-3.3,5.2L53.2,87.8
			L53.2,87.8z"/>
	</g>
	<g class="element">
		<path d="M77.5,102.3l8.9-2.4c0.1-0.5,0.3-1,0.4-1.6l0,0l-3.4-4L77.5,102.3z"/>
	</g>
	<g class="element">
		<path d="M59.5,85.2L59,81.9l-4.9-2.3l3.5,6C58.2,85.5,58.9,85.4,59.5,85.2z"/>
	</g>
	<g class="element">
		<path d="M64.2,80.5l5.6-1.6l1.8-2.6l0,0c-0.7-0.2-1.3-0.4-2-0.6h-0.1c-0.7-0.2-1.3-0.3-2-0.4h-0.1c-0.7-0.1-1.4-0.2-2.1-0.2h-0.1
			C64.5,75,63.8,75,63,75l0,0l-3.9,7L64.2,80.5z"/>
	</g>
	<g class="element">
		<path d="M109.1,91.7l-2.9-2.4l0,0c-0.1,0.3-0.2,0.7-0.3,1l0,0c-0.1,0.3-0.3,0.6-0.4,1l0,0c-0.6,1.3-1.4,2.5-2.3,3.6l0,0
			c-0.2,0.3-0.4,0.5-0.7,0.8l0,0c-0.2,0.3-0.5,0.5-0.7,0.8l5.1,2.8L109.1,91.7z"/>
	</g>
	<g class="element">
		<path d="M59,81.9l3.9-7l0,0c-0.8,0-1.7,0-2.5,0.1l0,0c-0.8,0.1-1.6,0.2-2.4,0.3l0,0c-1.6,0.3-3.1,0.7-4.5,1.2l0,0l0.7,3.1L59,81.9
			z"/>
	</g>
	<g class="element">
		<path d="M109.1,77.2v-4.4l-7-5l-3.2,3.3l0,0c0.6,0.4,1.1,0.9,1.6,1.3l0.1,0.1c0.5,0.4,0.9,0.9,1.4,1.3c0,0.1,0.1,0.1,0.1,0.2
			c0.4,0.5,0.8,0.9,1.2,1.4l0.1,0.1c0.4,0.5,0.7,1,1,1.5l5,0.7L109.1,77.2z"/>
	</g>
	<g class="element">
		<path d="M86.7,98.3L86.7,98.3c0.2-0.9,0.2-1.8,0.3-2.8l0,0l-3.7-1.2L86.7,98.3z"/>
	</g>
	<g class="element">
		<path d="M109.4,77.7l-5-0.7c0.3,0.5,0.5,1,0.8,1.4c0,0,0,0.1,0.1,0.1c0.2,0.5,0.4,1,0.6,1.4c0,0.1,0,0.1,0.1,0.2
			c0.4,1,0.6,2,0.8,3.1l6,0.4L109.4,77.7z"/>
	</g>
	<g class="element">
		<path d="M54.1,79.7l-0.7-3.1l0,0c-1.4,0.5-2.7,1.1-4,1.8l0,0l1.4,6.6L54.1,79.7z"/>
	</g>
	<g class="element">
		<path d="M88.3,63.2l-1.6,2.6c2.5,0.6,4.8,1.3,6.9,2.3l0,0l4.2-4.9C97.8,63.2,88.3,63.2,88.3,63.2z"/>
	</g>
	<g class="element">
		<path d="M97.8,63.2l-4.2,4.9l0,0c0.5,0.2,0.9,0.4,1.4,0.7h0.1c0.4,0.2,0.8,0.4,1.2,0.7c0.1,0,0.1,0.1,0.2,0.1
			c0.4,0.2,0.7,0.4,1.1,0.7c0.1,0,0.1,0.1,0.2,0.1c0.4,0.3,0.8,0.5,1.1,0.8l0,0l3.2-3.3L97.8,63.2z"/>
	</g>
	<g class="element">
		<path d="M112.7,83.6l-6-0.4c0,0.3,0.1,0.7,0.1,1l0,0c0,0.3,0,0.7,0,1s0,0.7,0,1c0,0.1,0,0.1,0,0.2c0,0.3-0.1,0.6-0.1,0.8v0.1
			c0,0.3-0.1,0.6-0.2,0.9l0,0c-0.1,0.3-0.2,0.6-0.2,0.9l0,0l2.9,2.4L112.7,83.6z"/>
	</g>
	<g class="element">
		<path d="M86.9,61l-3.6,4.2c1.2,0.2,2.3,0.4,3.4,0.6l1.6-2.6L86.9,61z"/>
	</g>
	<g class="element">
		<path d="M80.1,91.7l6.3-0.9c-0.1-0.4-0.2-0.7-0.3-1.1c0,0,0,0,0-0.1c-0.1-0.3-0.2-0.7-0.4-1l0,0c-0.9-2.1-2.2-4.1-3.8-5.8l0,0
			l-3.8,2.1L80.1,91.7z"/>
	</g>
	<g class="element">
		<path d="M93.8,110.7l-2.7-7.1l0,0c-0.5,0.2-1,0.4-1.5,0.6l0,0c-0.5,0.2-1,0.3-1.5,0.5c-1.5,0.4-3,0.8-4.5,1.1l3.3,5.4L93.8,110.7z
			"/>
	</g>
	<g class="element">
		<path d="M83.3,94.3l3.7,1.2c0-0.1,0-0.2,0-0.3c0-0.4,0-0.7,0-1.1c0-0.1,0-0.1,0-0.2c0-0.3-0.1-0.6-0.1-1c0,0,0,0,0-0.1
			c0-0.3-0.1-0.7-0.2-1l0,0c-0.1-0.4-0.2-0.7-0.2-1.1l-6.3,0.9L83.3,94.3z"/>
	</g>
	<g class="element">
		<path d="M78.1,84.9l3.8-2.1l0,0c-1-1-2-2-3.2-2.8l-0.1-0.1c-0.4-0.3-0.8-0.5-1.2-0.8l-5.1,4.6L78.1,84.9z"/>
	</g>
	<g class="element">
		<path d="M106.9,99.3l-5.1-2.8c-0.6,0.6-1.3,1.3-2,1.8l0,0c-0.7,0.6-1.4,1.1-2.1,1.6l2.7,2.3L106.9,99.3z"/>
	</g>
	<g class="element">
		<path d="M72.3,83.6l5.1-4.6c-0.4-0.3-0.9-0.5-1.3-0.8c0,0-0.1,0-0.1-0.1c-0.4-0.2-0.9-0.5-1.4-0.7l0,0c-1-0.5-2-0.9-3.1-1.2l0,0
			l-1.8,2.6L72.3,83.6z"/>
	</g>
	<g class="element">
		<path d="M100.3,102.3l-2.7-2.3c-0.5,0.4-1.1,0.7-1.6,1.1l0,0c-0.5,0.3-1.1,0.6-1.6,0.9l0,0c-0.5,0.3-1.1,0.6-1.6,0.8l0,0
			c-0.5,0.3-1.1,0.5-1.6,0.7l0,0l2.7,7.1L100.3,102.3z"/>
	</g>
</g>
<g id="logo-k-elements">
	<g class="element">
		<polygon points="33,32.8 33,37.1 37.3,32.8 		"/>
	</g>
	<g class="element">
		<polygon points="59,36.6 63.8,37.1 63.6,32.8 57.3,32.8 56.5,38.2 		"/>
	</g>
	<g class="element">
		<polygon points="43.1,32.8 40,42.8 42.3,42.8 48.4,32.8 		"/>
	</g>
	<g class="element">
		<polygon points="49.5,42.8 55.9,42.8 56.5,38.2 		"/>
	</g>
	<g class="element">
		<polygon points="75.3,38.3 74.6,37.3 78.1,32.8 70.9,32.8 69.8,37.7 		"/>
	</g>
	<g class="element">
		<polygon points="89.4,34.4 88.3,32.8 84.8,32.8 85.5,36.2 		"/>
	</g>
	<g class="element">
		<polygon points="118,35.9 118,32.8 110.8,32.8 110.8,32.9 		"/>
	</g>
	<g class="element">
		<polygon points="118,42.8 118,38.3 115.3,42.8 		"/>
	</g>
	<g class="element">
		<polygon points="33,42.8 39.8,42.8 33,38.6 		"/>
	</g>
	<g class="element">
		<polygon points="97.2,32.8 92.7,32.8 89.4,34.4 92.1,38.7 88.8,42.8 98.6,42.8 100.3,40 		"/>
	</g>
	<g class="element">
		<polygon points="110.7,32.8 106.9,32.8 103.6,36.6 105.5,42.8 112.1,42.8 110.8,32.9 		"/>
	</g>
	<g class="element">
		<polygon points="80.3,38.7 75.3,38.3 78.8,42.8 86.9,42.8 85.5,36.2 		"/>
	</g>
	<g class="element">
		<polygon points="63.8,37.1 64.1,42.8 68.6,42.8 69.8,37.7 		"/>
	</g>
	<g class="element">
		<polygon points="106.9,32.8 97.2,32.8 100.3,40 98.6,42.8 105.5,42.8 103.6,36.6 		"/>
	</g>
	<g class="element">
		<polygon points="69.8,37.7 68.6,42.8 78.8,42.8 75.3,38.3 		"/>
	</g>
	<g class="element">
		<polygon points="37.3,32.8 33,37.1 33,38.6 39.8,42.8 40,42.8 43.1,32.8 		"/>
	</g>
	<g class="element">
		<polygon points="110.8,32.8 110.7,32.8 110.8,32.9 		"/>
	</g>
	<g class="element">
		<polygon points="57.3,32.8 48.4,32.8 42.3,42.8 49.5,42.8 56.5,38.2 		"/>
	</g>
	<g class="element">
		<polygon points="59,36.6 56.5,38.2 55.9,42.8 64.1,42.8 63.8,37.1 		"/>
	</g>
	<g class="element">
		<polygon points="69.8,37.7 70.9,32.8 63.6,32.8 63.8,37.1 		"/>
	</g>
	<g class="element">
		<polygon points="92.7,32.8 88.3,32.8 89.4,34.4 		"/>
	</g>
	<g class="element">
		<polygon points="110.8,32.9 112.1,42.8 115.3,42.8 118,38.3 118,35.9 		"/>
	</g>
	<g class="element">
		<polygon points="89.4,34.4 85.5,36.2 86.9,42.8 88.8,42.8 92.1,38.7 		"/>
	</g>
	<g class="element">
		<polygon points="75.3,38.3 80.3,38.7 85.5,36.2 84.8,32.8 78.1,32.8 74.6,37.3 		"/>
	</g>
</g>
<g id="logo-a-elements">
	<g class="element">
		<polygon points="55.8,94.8 53,94.5 52.3,98.3 55.8,99.4 57.8,97.3 		"/>
	</g>
	<g class="element">
		<path d="M70.7,99.3l5.4-0.5c0.1-0.3,0.3-0.6,0.4-0.9l0,0c0.1-0.3,0.2-0.6,0.3-0.8c0-0.1,0-0.2,0.1-0.3c0.1-0.2,0.1-0.4,0.1-0.7
			c0-0.3,0.1-0.7,0.1-1s0-0.6-0.1-0.8c0-0.1,0-0.2,0-0.3l-5.3,1.5L70.7,99.3z"/>
	</g>
	<g class="element">
		<polygon points="65.3,96.9 61.7,99.4 64.6,101.9 68.6,97.3 		"/>
	</g>
	<g class="element">
		<polygon points="57.8,97.3 55.8,99.4 58.4,101.9 64.6,101.9 61.7,99.4 		"/>
	</g>
	<g class="element">
		<polygon points="60.7,94.3 61.7,99.4 65.3,96.9 65.3,94 		"/>
	</g>
	<g class="element">
		<polygon points="65.3,96.9 68.6,97.3 71.6,95.5 71.6,92.1 65.3,94 		"/>
	</g>
	<g class="element">
		<polygon points="57.8,97.3 61.7,99.4 60.7,94.3 		"/>
	</g>
	<g class="element">
		<polygon points="57.8,97.3 60.7,94.3 60.9,90 58.4,90.1 55.8,94.8 		"/>
	</g>
	<g class="element">
		<polygon points="71.6,92.1 67.2,89.7 65.3,94 		"/>
	</g>
	<g class="element">
		<polygon points="58.4,90.1 55.7,90.2 53,94.5 55.8,94.8 		"/>
	</g>
	<g class="element">
		<polygon points="65.3,94 67.2,89.7 60.9,90 60.7,94.3 		"/>
	</g>
	<g class="element">
		<polygon points="71.6,95.5 68.6,97.3 64.6,101.9 70.7,99.3 		"/>
	</g>
	<g class="element">
		<path d="M55.8,99.4l-4.2,1.9c0.3,0.3,0.7,0.7,1.1,1c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3c0.3,0.2,0.7,0.4,1.1,0.6
			l0.2,0.1c0.3,0.2,0.6,0.3,0.9,0.4h0.1l0,0c0.2,0.1,0.4,0.2,0.7,0.3l1.9-2.4L55.8,99.4z"/>
	</g>
	<g class="element">
		<path d="M76.9,94c-0.1-0.4-0.2-0.9-0.3-1.3c0-0.1-0.1-0.2-0.1-0.3c-0.1-0.2-0.1-0.3-0.2-0.5c-0.1-0.1-0.1-0.2-0.2-0.3
			c-0.1-0.2-0.2-0.3-0.3-0.5l-4.2,4.4L76.9,94z"/>
	</g>
	<g class="element">
		<path d="M64.6,101.9h-6.2l-1.9,2.4c0.3,0.1,0.6,0.2,1,0.3c0.1,0,0.2,0,0.2,0.1c0.3,0.1,0.7,0.2,1.1,0.3c1.4,0.3,2.7,0.5,4,0.5
			c0.1,0,0.3,0,0.4,0L64.6,101.9z"/>
	</g>
	<g class="element">
		<path d="M53,94.5L48.8,95v0.1c0,0.3,0,0.7,0.1,1c0,0.1,0,0.3,0.1,0.4c0,0.1,0.1,0.3,0.1,0.4c0.1,0.4,0.3,0.8,0.4,1.2l0,0h2.8
			L53,94.5z"/>
	</g>
	<g class="element">
		<path d="M71.7,103.2L71.7,103.2c0.5-0.3,0.9-0.6,1.3-0.9l0.1-0.1c0.4-0.3,0.7-0.6,1.1-0.9l0.1-0.1c0.7-0.7,1.3-1.5,1.7-2.4
			l-5.4,0.5L71.7,103.2z"/>
	</g>
	<g class="element">
		<path d="M64.6,101.9l2.2,3.2l0,0c0.9-0.2,1.8-0.4,2.6-0.8l0,0c0.4-0.2,0.8-0.3,1.2-0.5l0,0c0.4-0.2,0.8-0.4,1.1-0.6l0,0l-1.1-3.9
			L64.6,101.9z"/>
	</g>
	<g class="element">
		<path d="M63.3,105.5c0.6,0,1.1-0.1,1.7-0.1h0.1c0.6-0.1,1.1-0.2,1.6-0.3l0,0l-2.2-3.2L63.3,105.5z"/>
	</g>
	<g class="element">
		<path d="M52.3,98.3h-2.8l0,0c0.5,1.1,1.2,2.1,2.1,3l4.2-1.9L52.3,98.3z"/>
	</g>
	<g class="element">
		<path d="M55.7,90.2l-3.4-1.6l0,0c-0.2,0.2-0.5,0.4-0.7,0.6l-0.1,0.1c-0.2,0.2-0.4,0.4-0.6,0.6c0,0.1-0.1,0.1-0.1,0.2
			c-0.2,0.2-0.3,0.4-0.5,0.6c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.2-0.3,0.4-0.4,0.6c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.2-0.2,0.5-0.3,0.7v0.1
			c-0.3,0.8-0.5,1.7-0.5,2.6l4.2-0.5L55.7,90.2z"/>
	</g>
	<g class="element">
		<path d="M71.6,92.1l1.5-3.9c-0.8-0.6-1.7-1.1-2.6-1.6h-0.1c-0.4-0.2-0.9-0.4-1.3-0.6c-0.1,0-0.1,0-0.2-0.1c-0.5-0.2-1-0.3-1.5-0.5
			v4.3L71.6,92.1z"/>
	</g>
	<g class="element">
		<path d="M71.6,95.5l4.2-4.4c-0.7-1.1-1.6-2.1-2.7-3L71.6,92V95.5z"/>
	</g>
	<g class="element">
		<path d="M60.9,90l6.3-0.3v-4.3c-0.2-0.1-0.5-0.1-0.8-0.2c-0.2,0-0.3-0.1-0.5-0.1S65.5,85,65.2,85c-0.2,0-0.5-0.1-0.7-0.1
			s-0.3,0-0.5,0c-0.4,0-0.8,0-1.3,0c-0.2,0-0.4,0-0.6,0L60.9,90L60.9,90z"/>
	</g>
	<g class="element">
		<path d="M58.4,90.1l-0.5-4.5c-1.6,0.5-3.1,1.1-4.4,2c0,0-0.1,0-0.1,0.1c-0.4,0.3-0.8,0.6-1.2,0.9l0,0l3.4,1.6L58.4,90.1z"/>
	</g>
	<g class="element">
		<path d="M60.9,90L60.9,90l1.3-5l0,0c-1.5,0.1-3,0.3-4.3,0.7l0.5,4.5L60.9,90z"/>
	</g>
</g>
     
  <circle id="blast" r="0" cx="0" cy="0" stroke="orange" fill="orange" fill-opacity="0.3"></circle>
  
</svg>

              
            
!

CSS

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

#Calque_1 {  
  overflow: visible !important;
  width: 80vmin;
  height: 80vmin;
}

#blast {
  stroke: none;
}

.element {
  fill: #000;
  fill-opacity: 0.7;
  stroke: #333;
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
              
            
!

JS

              
                
let bounds = document.querySelector("#logo-cadre-elements").getBBox();
let blast = document.querySelector("#blast")

gsap.set(".element", {
  transformOrigin: "50% 50%"
});

let center = {
  x: bounds.x + bounds.width  / 2,
  y: bounds.y + bounds.height / 2,
};

let stagger = 1;
let radius = getDistance(center, bounds);

gsap.set(blast, { attr: { r: radius, cx: center.x, cy: center.y }});
gsap.set(blast, { transformOrigin: "center", scale: 0 });

let tl = gsap.timeline({ defaults: { ease: "none" }})
  .to(blast, { scale: 1, duration: stagger }, 0)
  .to(blast, { scale: 2, autoAlpha: 0, duration: stagger }, stagger)

gsap.utils.toArray(".element").forEach((element, i) => {
  
  let bbox = element.getBBox();
  let dist = getDistance(bbox, center);
  let delay = dist / radius * stagger;  
  let scalar = radius / dist;
  
  tl.to(element, {    
    opacity: 0,
    x: (bbox.x - center.x) * scalar, 
    y: (bbox.y - center.y) * scalar,
    duration: "random(1, 3)",
    rotation: "random(-720, 720)",
    scale: "random(0.1, 0.5)"
  }, delay);  
});

gsap.to(tl, {
  duration: 15,
  progress: 1,
  ease: "expo.inOut",
  repeat: -1,
});

function getDistance(p1, p2) {
  var dx = p2.x - p1.x;
  var dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

              
            
!
999px

Console