cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <!-- http://www.loopdeloop.org/post/163126420754/waiting-for-my-pizza-to-arrive-sander-bongers -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 259 259" style="enable-background:new 0 0 259 259;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F8CE28;}
	.st1{fill:#F6AE1B;}
	.st2{fill:#D23D42;}
	.st3{fill:#6AA342;}
	.st4{fill:none;stroke:#216C3F;stroke-linecap:round;}
	.st5{fill:#F3E0AC;}
	.st6{fill:none;stroke:#EDC31C;stroke-width:1.5;stroke-linecap:round;}
</style>
<title>Artboard 1</title>
<g>
	<g id="circles">
		<g id="slice-1-left">
			
				<ellipse id="slice-1-circle" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -41.8245 51.8829)" class="st0" cx="127.5" cy="145.6" rx="5" ry="5.4"/>
			
				<ellipse id="slice-1-circle-2" transform="matrix(0.9433 -0.3318 0.3318 0.9433 -51.8933 47.8598)" class="st0" cx="114.2" cy="175.9" rx="6.3" ry="6"/>
			<path id="slice-1-circle-3" class="st0" d="M80,214.7c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.9,3.2-1,6.5-4.2,7.4C84.2,219.7,80.9,217.9,80,214.7L80,214.7z"/>
			<path id="slice-1-circle-4" class="st0" d="M96.6,222.2c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.4-0.9-7.3-4V222.2z"/>
			<path id="slice-1-circle-5" class="st0" d="M104.8,224.3c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.4-0.9-7.3-4C104.8,224.4,104.8,224.3,104.8,224.3z"/>
			<path id="slice-1-circle-6" class="st0" d="M110.3,224.9c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.8,3.2-1.1,6.5-4.3,7.3C114.4,229.9,111.2,228.1,110.3,224.9L110.3,224.9z"/>
			<path id="slice-1-circle-7" class="st0" d="M117.2,224.9c-0.7-2.6,0.3-5.2,2.5-5.7s4.5,1,5.2,3.7s-0.3,5.2-2.5,5.7
				S118,227.5,117.2,224.9z"/>
			<path id="slice-1-circle-8" class="st0" d="M122,225.5c-0.7-2.6,0.3-5.2,2.5-5.7s4.5,1,5.2,3.7s-0.3,5.2-2.5,5.7
				S122.8,228.1,122,225.5z"/>
			<path id="slice-1-circle-9" class="st0" d="M134.6,180.8c-0.7-2.6,0.3-5.2,2.5-5.7s4.5,1,5.2,3.7s-0.3,5.2-2.5,5.7
				S135.4,183.3,134.6,180.8z"/>
			<path id="slice-1-circle-10" class="st0" d="M130.8,181.5c-0.7-2.6,0.3-5.2,2.5-5.7s4.5,1,5.2,3.7s-0.3,5.2-2.5,5.7
				S131.7,184.1,130.8,181.5z"/>
			<path id="slice-1-circle-11" class="st0" d="M88,219c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.3-0.8-7.2-3.9C88,219.1,88,219,88,219z"/>
			<path id="slice-1-circle-12" class="st0" d="M121.6,180.4c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.3,0.9,7.3,3.9c0,0.1,0,0.1,0,0.2
				c0.9,3.2-1,6.4-4.2,7.3h-0.1c-3.1,0.9-6.3-0.8-7.2-3.9C121.6,180.5,121.6,180.4,121.6,180.4z"/>
			<path id="slice-1-circle-13" class="st0" d="M118,179.1c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.8,3.2-1.1,6.5-4.3,7.3C122.1,184,118.9,182.2,118,179.1z"/>
			<path id="slice-1-circle-14" class="st0" d="M126.9,147.6c-0.7-2.6,0.3-5.2,2.5-5.7s4.5,1,5.2,3.7s-0.3,5.2-2.5,5.7
				S127.7,150.2,126.9,147.6z"/>
			<path id="slice-1-circle-15" class="st0" d="M132,148.3c-0.5-2.1,0.4-4.3,2.4-4.8c2.1-0.4,4.1,0.9,4.6,2.9c0.7,1.9-0.2,4-2.1,4.7
				c-0.1,0-0.2,0.1-0.3,0.1C134.7,151.7,132.7,150.3,132,148.3z"/>
			<path id="slice-1-circle-16" class="st0" d="M136.2,148.1c-0.3-1.3,0.5-2.6,1.8-2.8c1.3-0.3,2.6,0.5,2.8,1.8
				c0.3,1.3-0.5,2.5-1.7,2.8C137.8,150.1,136.5,149.3,136.2,148.1z"/>
			<path id="slice-1-circle-17" class="st0" d="M139.1,148.1c-0.3-1.2,0.4-2.5,1.6-2.9c1.2-0.3,2.4,0.4,2.8,1.6
				c0.3,1.2-0.4,2.5-1.6,2.9C140.7,150,139.4,149.3,139.1,148.1z"/>
			<path id="slice-1-circle-18" class="st0" d="M138.9,180c-0.5-1.6,0.3-3.4,2-3.9c1.6-0.5,3.4,0.3,3.9,2c0,0.1,0.1,0.2,0.1,0.3
				c0.5,1.6-0.3,3.4-2,3.9c-1.6,0.5-3.4-0.3-3.9-2C138.9,180.2,138.9,180.1,138.9,180z"/>
			<path id="slice-1-circle-19" class="st0" d="M142.3,179.3c-0.5-1.6,0.3-3.4,2-3.9c1.6-0.5,3.4,0.3,3.9,2c0,0.1,0.1,0.2,0.1,0.3
				c0.5,1.7-0.5,3.4-2.2,3.9C144.4,181.9,142.7,180.9,142.3,179.3z"/>
			<path id="slice-1-circle-20" class="st0" d="M145.8,179.3c-0.5-1.6,0.3-3.4,2-3.9c1.6-0.5,3.4,0.3,3.9,2c0,0.1,0.1,0.2,0.1,0.3
				c0.5,1.7-0.5,3.4-2.2,3.9C147.9,181.9,146.3,180.9,145.8,179.3z"/>
			<path id="slice-1-circle-21" class="st0" d="M141.4,147.2c-0.3-1.2,0.4-2.5,1.6-2.8c1.2-0.3,2.5,0.4,2.8,1.6
				c0.3,1.2-0.4,2.5-1.6,2.8l0,0C143,149.1,141.8,148.4,141.4,147.2L141.4,147.2z"/>
			<path id="slice-1-circle-22" class="st0" d="M126.6,225c-0.5-1.6,0.3-3.4,2-3.9c1.6-0.5,3.4,0.3,3.9,2c0,0.1,0.1,0.2,0.1,0.3
				c0.5,1.7-0.5,3.4-2.2,3.9C128.7,227.5,127.2,226.5,126.6,225z"/>
			<path id="slice-1-circle-23" class="st0" d="M130.1,224.9c-0.5-1.6,0.3-3.4,2-3.9c1.6-0.5,3.4,0.3,3.9,2c0,0.1,0.1,0.2,0.1,0.3
				c0.5,1.7-0.5,3.4-2.2,3.9C132.2,227.5,130.6,226.5,130.1,224.9z"/>
			<path id="slice-1-circle-24" class="st0" d="M133.7,224.5c-0.3-1.6,0.3-3.2,1.8-3.6c1.6-0.3,3.1,0.8,3.4,2.3
				c0.4,1.7-0.3,3.2-1.8,3.6C135.5,227,134.1,226,133.7,224.5z"/>
		</g>
		<g id="slice-1-right">
			
				<ellipse id="slice-1-circle-25" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -42.0815 53.2201)" class="st0" cx="131.2" cy="147" rx="2.3" ry="1.9"/>
			
				<ellipse id="slice-1-circle-26" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -41.9817 55.1964)" class="st0" cx="136.9" cy="147.7" rx="3" ry="3.2"/>
			
				<ellipse id="slice-1-circle-27" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -41.6865 57.2766)" class="st0" cx="143" cy="147.9" rx="4.5" ry="5.2"/>
			<path id="slice-1-circle-28" class="st0" d="M157.1,181c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
				c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C157.1,180.8,157.1,180.9,157.1,181z"/>
			<path id="slice-1-circle-29" class="st0" d="M137.6,224.7c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.3,0.9,7.3,3.9c0,0.1,0,0.1,0,0.2
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.3-0.8-7.2-3.9C137.6,224.8,137.6,224.7,137.6,224.7z"/>
			<path id="slice-1-circle-30" class="st0" d="M123.5,224.7c-0.7-2.4,0.7-4.9,3.1-5.6c2.3-0.7,4.8,0.7,5.4,3c0,0.1,0.1,0.2,0.1,0.3
				c0.6,2.4-0.8,4.8-3.1,5.4C126.5,228.5,124.1,227,123.5,224.7z"/>
			<path id="slice-1-circle-31" class="st0" d="M128.1,224.8c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.3,0.9,7.3,3.9c0,0.1,0,0.1,0,0.2
				c0.9,3.2-1,6.4-4.2,7.3h-0.1C132.2,229.7,129,227.9,128.1,224.8z"/>
			<path id="slice-1-circle-32" class="st0" d="M147.2,224.1c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.3,0.9,7.3,3.9c0,0.1,0,0.1,0,0.2
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.3-0.9-7.3-3.9C147.2,224.2,147.2,224.1,147.2,224.1z"/>
			<path id="slice-1-circle-33" class="st0" d="M138.4,181.8c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-1,6.4,0.8,7.4,3.9c1,3.1-0.8,6.4-3.9,7.4
				c-0.2,0.1-0.3,0.1-0.5,0.1c-3.1,0.9-6.3-0.8-7.2-3.9C138.4,181.9,138.4,181.8,138.4,181.8z"/>
			<path id="slice-1-circle-34" class="st0" d="M132,181.6c-0.6-2.3,1-4.7,3.7-5.5s5.2,0.4,5.8,2.8s-1,4.7-3.7,5.5
				C135.2,185,132.6,183.8,132,181.6z"/>
			<path id="slice-1-circle-35" class="st0" d="M153.6,223.9c-0.8-3.2,1.1-6.5,4.3-7.3c3.1-0.9,6.4,0.9,7.3,4c0,0,0,0,0,0.1
				c0.9,3.2-1,6.5-4.2,7.4C157.8,228.9,154.5,227.1,153.6,223.9L153.6,223.9z"/>
			<path id="slice-1-circle-36" class="st0" d="M159.3,222.9c-0.8-3.2,1.1-6.5,4.3-7.3c3-0.9,6.3,0.8,7.2,3.8c0,0.1,0.1,0.2,0.1,0.3
				c0.8,3.2-1.1,6.5-4.3,7.3c-3.1,0.9-6.4-0.9-7.3-4V222.9z"/>
			
				<ellipse id="slice-1-circle-37" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -42.0582 52.5536)" class="st0" cx="129.3" cy="146.6" rx="1.8" ry="1.7"/>
			
				<ellipse id="slice-1-circle-38" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -42.1698 51.3132)" class="st0" cx="125.7" cy="146.3" rx="1.2" ry="1.2"/>
			
				<ellipse id="slice-1-circle-39" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -42.1537 52.0108)" class="st0" cx="127.7" cy="146.6" rx="1.4" ry="1.4"/>
			
				<ellipse id="slice-1-circle-40" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -53.3579 54.7014)" class="st0" cx="129.8" cy="180" rx="3.6" ry="3.6"/>
			
				<ellipse id="slice-1-circle-41" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -52.9321 53.3338)" class="st0" cx="126.1" cy="178.1" rx="3.7" ry="3.5"/>
			
				<ellipse id="slice-1-circle-42" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -53.2953 55.4609)" class="st0" cx="132" cy="180.2" rx="3.2" ry="2.8"/>
			
				<ellipse id="slice-1-circle-43" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -68.1557 55.2502)" class="st0" cx="124" cy="222.6" rx="3.8" ry="3.6"/>
			
				<ellipse id="slice-1-circle-44" transform="matrix(0.9407 -0.3392 0.3392 0.9407 -41.9016 54.263)" class="st0" cx="134.3" cy="147" rx="2.3" ry="1.9"/>
		</g>
		<path id="slice-1-circle-45" class="st0" d="M155.8,148.2c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
			c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C155.8,148,155.8,148.1,155.8,148.2z"/>
		<path id="slice-1-circle-46" class="st0" d="M164.6,179.2c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
			c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C164.6,179,164.6,179.1,164.6,179.2z"/>
		<path id="slice-1-circle-47" class="st0" d="M174.8,174.8c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
			c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C174.8,174.6,174.8,174.7,174.8,174.8z"/>
		<path id="slice-1-circle-48" class="st0" d="M199.5,213c-1.6,2.9-5.1,4.1-8.1,2.9c-2.7-1-4.1-4-3.1-6.7c0.1-0.3,0.2-0.5,0.3-0.7
			c1.6-2.9,5.1-4.1,8.1-2.9c2.8,1.1,4.1,4.3,3,7.1C199.6,212.7,199.5,212.9,199.5,213z"/>
		<path id="slice-1-circle-49" class="st0" d="M186.8,218.3c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
			c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C186.8,218.1,186.8,218.2,186.8,218.3z"/>
		<path id="slice-1-circle-50" class="st0" d="M193.6,215.9c-1.4,3-4.8,4.5-7.9,3.5c-2.8-0.8-4.4-3.7-3.6-6.4
			c0.1-0.3,0.2-0.5,0.3-0.8c1.4-3,4.8-4.5,7.9-3.5c2.9,1,4.4,4.1,3.4,7C193.6,215.7,193.6,215.8,193.6,215.9z"/>
	</g>
	<g id="slice-1">
		<path class="st1" d="M191.7,239.3h-49.1c2.9-0.7,5.8-1.5,8.9-2.1c6.4-1.4,12.3-4.6,18.3-7c4.6-1.8,9.5-2.7,13.8-5.1l0.6-0.3
			L191.7,239.3L191.7,239.3z"/>
		<path class="st1" d="M142.7,239.4h49.1c-5.6,3.2-12.8,2.8-18.8,5.1c-7.2,2.7-10.6,9.6-18.1,11c-6,1.1-11.8-0.3-17.9,0
			c-5.9,0.3-15,1.8-20.9,1.2c-6.4-0.6-14.3-4.8-20.6-6.4c-6.8-1.7-13.7-1.4-19.6-3.6c-3.7-1.4-6.5-4.7-10.4-7l59.3-0.1
			c2.4,1,5.1,1.6,7.7,1.6C135.9,240.8,139.3,240.2,142.7,239.4z"/>
		<polygon class="st0" points="181.9,220.5 184.1,224.7 183.6,225 73.7,225.2 73,224.7 75,221.1 82,211.2 89.7,196.3 100.3,180.1 
			108,165.2 118.4,149.6 124.9,136.7 128.8,129.5 134.4,138.2 140.8,148.4 148.2,161.4 157.9,180 166.3,193.1 175.6,211 		"/>
		<path class="st0" d="M73.7,225.2l109.9-0.1c-4.4,2.5-9.2,3.3-13.8,5.1c-6,2.4-11.9,5.7-18.3,7c-3,0.6-5.9,1.4-8.9,2.1h-18.1
			c-2.4-1-4.9-1.6-7.4-2c-6.1-0.7-13.6,0.7-19.6-1.1c-4.5-1.4-8-4.6-12.3-6.5C81.5,228.1,77.2,227.1,73.7,225.2z"/>
		<path class="st0" d="M142.7,239.4c-3.4,0.9-6.8,1.4-10.3,1.7c-2.7,0.1-5.2-0.8-7.7-1.6L142.7,239.4z"/>
		<path class="st1" d="M124.6,239.4H65.3l7.8-14.7l0.7,0.4c3.6,2.1,7.8,3.1,11.4,4.7c4.3,1.8,7.8,5.2,12.3,6.5
			c6,1.7,13.5,0.4,19.6,1.1C119.7,237.7,122.2,238.4,124.6,239.4z"/>
		<path class="st2" d="M114.4,190.6c2.8-4.7,9.4-6,14.9-2.7s7.7,9.5,4.9,14.1s-9.4,6-14.9,2.7C113.7,201.6,111.6,195.3,114.4,190.6z
			"/>
		<path class="st3" d="M128.7,168.9c0,0,4.4-0.9,1.9-6.4s-5.1-4.8-5.1-4.8s-2.4,5.4-1.3,8.7C124.8,168.2,126.8,169.3,128.7,168.9z"
			/>
		<path class="st3" d="M159.5,218.3c0,0,2.9-6.4-1.8-10.3s-5.9-0.4-5.9-0.4s-1,3.8,1.4,6.1C155.1,215.4,157.2,216.9,159.5,218.3z"/>
		<polyline class="st4" points="160,219.1 157.2,214.1 157.1,211.2 		"/>
		<line class="st4" x1="157.2" y1="214.1" x2="155.1" y2="212.8"/>
		<polyline class="st4" points="125.7,156.9 127.1,162.5 126.5,165.4 		"/>
		<line class="st4" x1="127.1" y1="162.5" x2="128.7" y2="164.3"/>
		<path class="st5" d="M101.7,212c0,0-4.5,0.4-3.1-2.7c1.2-2.9,7.8-1.1,7.8-1.1s3.7,3,3.5,6.5s-4.5-0.6-4.5-0.6
			c-0.6,1.3-1.5,2.4-2.7,3.2c-1.7,1-4.9,0.1-2.6-2.4"/>
		<path class="st5" d="M142.9,175.8c0,0-0.4-2.9,1.7-2.1c1.9,0.7,0.8,4.9,0.8,4.9s-1.9,2.4-4.2,2.5c-2.3-0.1,0.3-2.9,0.3-2.9
			c-0.9-0.3-1.6-0.9-2.2-1.6c-0.8-1.1-0.1-3.2,1.5-1.8"/>
		<path class="st6" d="M145.8,195.9c0,0,2.8,4.5,7.1,1.1c2.1-1.4,2.6-4.3,1.2-6.4c-0.2-0.3-0.4-0.6-0.7-0.8"/>
		<path class="st6" d="M122.3,219.8c0,0-5.4-0.7-5.4,4.9c0,5.4,5.3,4.9,5.3,4.9"/>
		<path class="st6" d="M136.1,154.8c-0.6,1.6-0.2,3.5,1,4.7c2.1,2,3.8,3.4,3.8,3.4"/>
		<path class="st6" d="M141.7,217c0.9-1.5,0.9-3.3,0.1-4.8c-1.5-2.3-2.9-4.3-2.9-4.3"/>
		<path class="st6" d="M91.4,218c-1.5-0.9-3.5-0.8-4.9,0.2c-2.3,1.8-4.1,3.1-4.1,3.1"/>
	</g>
	<g id="slice-1-2">
		<g id="_Group_2">
			<path class="st1" d="M255.4,129.9L255.4,129.9l-24.5,42.5c0.8-2.9,1.6-5.8,2.6-8.8c2-6.2,2.1-12.9,3.1-19.3
				c0.7-4.9,2.4-9.6,2.4-14.5v-0.7L255.4,129.9z"/>
			<path class="st1" d="M230.9,172.4l24.5-42.5c0,6.4-4,12.5-5,18.8c-1.2,7.6,3,13.9,0.5,21.2c-2,5.7-6.2,10-9,15.5
				c-2.7,5.2-6,13.9-9.5,18.7c-3.7,5.2-11.3,10-15.9,14.6c-4.9,5-8.1,11.1-12.9,15.1c-3.1,2.6-7.3,3.2-11.3,5.5l29.6-51.4
				c2.1-1.6,3.9-3.6,5.3-5.9C228.7,178.9,230,175.7,230.9,172.4z"/>
			<polygon class="st0" points="234.2,129 238.9,129.2 238.9,129.8 184.1,225 183.4,225.4 181.3,222 176.2,210.9 167.1,196.8 
				158.4,179.5 149.4,165.4 141.1,148.6 133.1,136.5 128.8,129.5 139.2,129 151.2,128.5 166.1,128.7 187.1,129.6 202.7,128.9 
				222.8,129.7 			"/>
			<path class="st0" d="M184.1,225l54.9-95.2c0,5-1.7,9.6-2.4,14.5c-0.9,6.4-1.1,13.1-3.1,19.3c-1,2.9-1.7,5.8-2.6,8.8l-9.1,15.7
				c-2,1.6-3.9,3.4-5.5,5.4c-3.7,4.9-6.2,12.1-10.7,16.4c-3.5,3.2-8,4.6-11.8,7.4C190.6,219.8,187.6,223,184.1,225z"/>
			<path class="st0" d="M230.9,172.4c-0.9,3.4-2.2,6.7-3.7,9.8c-1.3,2.4-3.3,4.1-5.3,5.9L230.9,172.4z"/>
			<path class="st1" d="M221.9,188.1l-29.7,51.4l-8.8-14.1l0.7-0.4c3.7-2.1,6.5-5.2,9.8-7.6c3.8-2.8,8.4-4.2,11.8-7.4
				c4.5-4.3,7.1-11.5,10.7-16.4C217.9,191.5,219.8,189.6,221.9,188.1z"/>
		</g>
		<path class="st2" d="M174.5,172.5c-2.6-4.8-0.4-11.2,5.1-14.3s12.1-1.9,14.7,2.8s0.4,11.2-5.1,14.3
			C183.8,178.6,177.2,177.3,174.5,172.5z"/>
		<path class="st3" d="M162.9,149.3c0,0,1.4-4.2-4.6-4.9s-6.7,2-6.7,2s3.5,4.8,6.9,5.5S162.9,149.3,162.9,149.3z"/>
		<path class="st3" d="M221,147.3c0,0-4.1-5.7-9.9-3.6c-5.6,2.1-3.3,4.9-3.3,4.9s2.8,2.8,6,1.8C216.3,149.7,218.7,148.6,221,147.3z"
			/>
		<polyline class="st4" points="222,147.3 216.3,147.2 213.7,145.9 		"/>
		<line class="st4" x1="216.3" y1="147.2" x2="214.1" y2="148.4"/>
		<polyline class="st4" points="151,145.9 156.6,147.5 158.7,149.5 		"/>
		<line class="st4" x1="156.6" y1="147.5" x2="158.9" y2="147"/>
		<path class="st5" d="M186.7,194.2c0,0-1.9,4.1-3.9,1.4c-1.9-2.5,2.9-7.3,2.9-7.3s4.5-1.8,7.4,0.2s-2.8,3.5-2.8,3.5
			c0.9,1.2,1.4,2.5,1.5,4c0,2-2.4,4.3-3.4,1.1"/>
		<path class="st5" d="M176,140.5c0,0-2.8-1.1-1-2.5c1.6-1.3,4.6,1.7,4.6,1.7s1.2,2.9,0.1,4.8s-2.4-1.7-2.4-1.7
			c-0.7,0.6-1.6,1-2.5,1.1c-1.3,0.1-2.9-1.5-0.8-2.2"/>
		<path class="st6" d="M194.9,148c0,0,5.3-0.2,4.5-5.6c-0.2-2.6-2.5-4.5-5-4.3c-0.3,0-0.6,0.1-1,0.2"/>
		<path class="st6" d="M203.8,180.3c0,0-3.3,4.3,1.5,7.1s6.9-2.1,6.9-2.1"/>
		<path class="st6" d="M154.4,135.8c0,0,1.9,2.4,4.5,1.5c2.8-0.9,4.8-1.6,4.8-1.6"/>
		<path class="st6" d="M211,162.1c0,0-1.4-2.7-4.1-2.5s-5.1,0.4-5.1,0.4"/>
		<path class="st6" d="M186.8,206.2c0,0-2.7,1.5-2.3,4.3s0.7,5.1,0.7,5.1"/>
	</g>
	<g id="_Group_3">
		<path class="st1" d="M192.5,20.1L192.5,20.1L217,62.6c-2.1-2.1-4.2-4.3-6.3-6.6c-4.4-4.8-10.1-8.3-15.2-12.3
			c-3.9-3.1-7.1-6.9-11.3-9.4l-0.6-0.3L192.5,20.1L192.5,20.1z"/>
		<path class="st1" d="M217,62.6l-24.6-42.5c5.5,3.2,8.8,9.7,13.8,13.8c6,4.9,13.6,4.4,18.6,10.2c3.9,4.6,5.6,10.4,8.9,15.5
			c3.2,4.9,9,12.1,11.5,17.6c2.7,5.8,3,14.8,4.7,21.1c1.9,6.7,5.6,12.5,6.7,18.8c0.7,3.9-0.9,8-0.9,12.5L226,78.1
			c-0.4-2.6-1.2-5.2-2.5-7.5C221.6,67.7,219.4,65,217,62.6z"/>
		<polygon class="st0" points="181.1,38 183.6,34 184.2,34.3 239.2,129.4 239.2,130.2 235.1,130.3 223,129.1 206.2,130 186.9,128.9 
			170.2,129.6 151.5,128.4 137,129.3 128.8,129.5 133.6,120.3 139.2,109.6 146.7,96.8 158,79.1 165.2,65.2 176,48.2 		"/>
		<path class="st0" d="M239.2,129.4l-55-95.1c4.3,2.5,7.4,6.3,11.3,9.4c5.1,4,10.8,7.5,15.2,12.3c2,2.3,4.2,4.4,6.3,6.6l9,15.7
			c0.4,2.5,1.1,5,2,7.4c2.4,5.6,7.4,11.4,8.9,17.5c1.1,4.6,0,9.2,0.6,13.9C237.9,121.2,239.2,125.3,239.2,129.4z"/>
		<path class="st0" d="M217,62.6c2.5,2.5,4.7,5.2,6.6,8.1c1.4,2.3,1.9,4.9,2.5,7.5L217,62.6z"/>
		<path class="st1" d="M226.1,78.2l29.7,51.4l-16.6,0.6v-0.8c0.1-4.2-1.2-8.3-1.6-12.3c-0.6-4.7,0.6-9.4-0.6-13.9
			c-1.5-6-6.4-11.9-8.9-17.5C227.1,83.3,226.4,80.7,226.1,78.2z"/>
	</g>
	<path class="st2" d="M189,111.4c-5.4-0.1-9.9-5.2-9.8-11.6s4.4-11.4,9.8-11.3s9.9,5.2,9.8,11.6S194.4,111.5,189,111.4z"/>
	<path class="st3" d="M163,109.9c0,0-3-3.3-6.5,1.6s-1.6,6.8-1.6,6.8s5.9-0.7,8.2-3.2C164.3,113.5,164.3,111.3,163,109.9z"/>
	<path class="st3" d="M190.4,58.5c0,0-7,0.7-8,6.7s2.6,5.3,2.6,5.3s3.8-1,4.6-4.3C190.1,63.6,190.4,61.1,190.4,58.5z"/>
	<polyline class="st4" points="190.9,57.7 187.9,62.6 185.5,64.1 	"/>
	<line class="st4" x1="187.9" y1="62.6" x2="187.8" y2="65"/>
	<polyline class="st4" points="154.1,118.4 158.3,114.4 161.1,113.6 	"/>
	<line class="st4" x1="158.3" y1="114.4" x2="159" y2="112.2"/>
	<path class="st5" d="M213.9,111.7c0,0,2.6,3.7-0.7,4c-3.1,0.4-4.9-6.2-4.9-6.2s0.7-4.7,3.9-6.3s1.7,4.2,1.7,4.2
		c1.4-0.2,2.9,0.1,4.2,0.7c1.7,1,2.6,4.2-0.8,3.4"/>
	<path class="st5" d="M161.9,94.2c0,0-2.3,1.8-2.6-0.4c-0.3-2,3.8-3.2,3.8-3.2s3.1,0.4,4.2,2.4s-2.6,1.2-2.6,1.2
		c0.2,0.9,0.1,1.8-0.3,2.7c-0.6,1.2-2.7,1.7-2.3-0.4"/>
	<path class="st6" d="M177.8,81.5c0,0,2.5-4.7-2.6-6.7c-2.3-1.1-5-0.1-6.1,2.2c-0.2,0.3-0.3,0.7-0.4,1"/>
	<path class="st6" d="M210.3,90c0,0,2.1,5,6.9,2.2s1.6-7.1,1.6-7.1"/>
	<path class="st6" d="M147.1,110.5c1.7-0.3,3.1-1.5,3.6-3.2c0.6-2.8,1.1-5,1.1-5"/>
	<path class="st6" d="M198.1,74.6c0,0-3-0.2-4.2,2.3l-2.2,4.6"/>
	<path class="st6" d="M224.2,117.6c0,1.8,1,3.4,2.6,4.2c2.7,1.1,4.8,2,4.8,2"/>
	<g id="_Group_4">
		<path class="st1" d="M65.9,19.7H115c-2.9,0.7-5.8,1.5-8.9,2.1c-6.4,1.4-12.3,4.6-18.3,7c-4.6,1.8-9.5,2.7-13.8,5.1l-0.6,0.3
			L65.9,19.7z"/>
		<path class="st1" d="M115,19.6H65.9c5.6-3.2,12.8-2.8,18.8-5.1c7.2-2.7,10.6-9.6,18.1-11c6-1.1,11.8,0.3,17.9,0
			c5.9-0.3,15-1.8,20.9-1.2c6.4,0.6,14.3,4.8,20.6,6.4c6.8,1.7,13.7,1.4,19.6,3.6c3.7,1.4,6.5,4.7,10.4,7l-59.3,0.1
			c-2.4-1-5.1-1.6-7.7-1.6C121.7,18.1,118.3,18.7,115,19.6z"/>
		<polygon class="st0" points="75.7,38.5 73.5,34.3 74.1,34 183.9,33.8 184.6,34.2 182.7,37.8 175.6,47.8 168,62.7 157.3,78.9 
			149.6,93.7 139.2,109.3 132.7,122.3 128.8,129.5 123.2,120.7 116.8,110.6 109.5,97.6 99.7,79 91.3,65.8 82,48 		"/>
		<path class="st0" d="M183.9,33.8L74,33.9c4.4-2.5,9.2-3.3,13.8-5.1c6-2.4,11.9-5.7,18.3-7c3-0.6,5.9-1.4,8.9-2.1h18.1
			c2.4,1,4.9,1.6,7.4,2c6.1,0.7,13.6-0.7,19.6,1.1c4.5,1.4,8,4.6,12.3,6.5C176.2,30.8,180.4,31.8,183.9,33.8z"/>
		<path class="st0" d="M115,19.6c3.4-0.9,6.8-1.4,10.3-1.7c2.7-0.1,5.2,0.8,7.7,1.6L115,19.6z"/>
		<path class="st1" d="M133,19.5h59.3l-7.8,14.7l-0.7-0.4c-3.6-2.1-7.8-3.1-11.4-4.7c-4.3-1.8-7.8-5.2-12.3-6.5
			c-6-1.7-13.5-0.4-19.6-1.1C137.9,21.2,135.4,20.5,133,19.5z"/>
	</g>
	<path class="st2" d="M143.3,68.4c-2.8,4.7-9.4,6-14.9,2.7s-7.7-9.5-4.9-14.1s9.4-6,14.9-2.7C143.9,57.3,146.1,63.7,143.3,68.4z"/>
	<path class="st3" d="M128.9,90.1c0,0-4.4,0.9-1.9,6.4c2.5,5.5,5.1,4.8,5.1,4.8s2.4-5.4,1.3-8.7S128.9,90.1,128.9,90.1z"/>
	<path class="st3" d="M98.1,40.7c0,0-2.9,6.4,1.8,10.3s5.9,0.4,5.9,0.4s1-3.8-1.4-6.1C102.5,43.5,100.4,41.9,98.1,40.7z"/>
	<polyline class="st4" points="97.6,39.8 100.4,44.9 100.6,47.7 	"/>
	<line class="st4" x1="100.4" y1="44.9" x2="102.5" y2="46.2"/>
	<polyline class="st4" points="131.9,102 130.5,96.5 131.2,93.6 	"/>
	<line class="st4" x1="130.5" y1="96.5" x2="128.9" y2="94.6"/>
	<path class="st5" d="M155.9,46.9c0,0,4.5-0.4,3.1,2.7c-1.2,2.9-7.8,1.1-7.8,1.1s-3.7-3-3.5-6.5s4.5,0.6,4.5,0.6
		c0.6-1.3,1.5-2.4,2.7-3.2c1.7-1,4.9-0.1,2.6,2.4"/>
	<path class="st5" d="M114.7,83.2c0,0,0.4,2.9-1.7,2.1c-1.9-0.7-0.8-4.9-0.8-4.9s1.9-2.4,4.2-2.5c2.3,0.1-0.3,2.9-0.3,2.9
		c0.9,0.3,1.6,0.9,2.2,1.6c0.7,1.1,0.1,3.2-1.5,1.8"/>
	<path class="st6" d="M111.8,63c0,0-2.8-4.5-7.1-1.1c-2.1,1.4-2.6,4.3-1.2,6.4c0.2,0.3,0.4,0.6,0.7,0.8"/>
	<path class="st6" d="M135.3,39.1c0,0,5.4,0.7,5.4-4.9c0-5.4-5.3-4.9-5.3-4.9"/>
	<path class="st6" d="M121.5,104.2c0.6-1.6,0.2-3.5-1-4.7c-2.1-2-3.8-3.4-3.8-3.4"/>
	<path class="st6" d="M115.9,42c-0.9,1.5-0.9,3.3-0.1,4.8c1.5,2.3,2.9,4.3,2.9,4.3"/>
	<path class="st6" d="M166.2,40.9c1.5,0.9,3.5,0.8,4.9-0.2c2.3-1.8,4.1-3.1,4.1-3.1"/>
	<g id="_Group_5">
		<path class="st1" d="M2.2,129.1L2.2,129.1l24.5-42.5c-0.8,2.9-1.6,5.8-2.6,8.8c-2,6.2-2.1,12.9-3.1,19.3
			c-0.7,4.9-2.4,9.6-2.4,14.5v0.7C18.6,129.9,2.2,129.1,2.2,129.1z"/>
		<path class="st1" d="M26.7,86.5L2.2,129.1c0-6.4,4-12.5,5-18.8c1.2-7.6-3-13.9-0.5-21.2c2-5.7,6.2-10,9-15.5
			c2.7-5.2,6-13.9,9.5-18.7c3.7-5.2,11.3-10,15.9-14.6c4.9-5,8.1-11.1,12.9-15.1c3.1-2.6,7.3-3.2,11.3-5.5L35.7,71
			c-2.1,1.6-3.9,3.6-5.3,5.9C28.8,79.9,27.6,83.1,26.7,86.5z"/>
		<polygon class="st0" points="23.5,130 18.7,129.7 18.7,129.2 73.5,33.9 74.2,33.6 76.4,37 81.4,48.1 90.5,62.2 99.2,79.5 
			108.3,93.6 116.6,110.4 124.5,122.5 128.8,129.5 118.4,130 106.4,130.4 91.5,130.3 70.6,129.4 55,130.1 34.8,129.2 		"/>
		<path class="st0" d="M73.5,33.9l-54.9,95.2c0-5,1.7-9.6,2.4-14.5c0.9-6.4,1.1-13.1,3.1-19.3c1-2.9,1.7-5.8,2.6-8.8l9.1-15.7
			c2-1.6,3.9-3.4,5.5-5.4C45,60.5,47.5,53.3,52,49c3.5-3.2,8-4.6,11.8-7.4C67.1,39.1,70,36,73.5,33.9z"/>
		<path class="st0" d="M26.7,86.5c0.9-3.4,2.2-6.7,3.7-9.8c1.3-2.4,3.3-4.1,5.3-5.9L26.7,86.5z"/>
		<path class="st1" d="M35.7,70.9l29.7-51.4l8.8,14.1L73.5,34c-3.7,2.1-6.5,5.2-9.8,7.6c-3.8,2.8-8.4,4.2-11.8,7.4
			c-4.5,4.3-7.1,11.5-10.7,16.4C39.6,67.4,37.7,69.3,35.7,70.9z"/>
	</g>
	<path class="st2" d="M83.1,86.4c2.6,4.8,0.4,11.2-5.1,14.3s-12.1,1.9-14.7-2.8s-0.4-11.2,5.1-14.3S80.5,81.7,83.1,86.4z"/>
	<path class="st3" d="M94.7,109.7c0,0-1.4,4.2,4.6,4.9s6.7-2,6.7-2s-3.5-4.8-6.9-5.5C95.9,106.3,94.7,109.7,94.7,109.7z"/>
	<path class="st3" d="M36.6,111.7c0,0,4.1,5.7,9.9,3.6c5.6-2.1,3.3-4.9,3.3-4.9s-2.8-2.8-6-1.8C41.2,109.3,38.8,110.3,36.6,111.7z"
		/>
	<polyline class="st4" points="35.6,111.7 41.3,111.8 43.9,113.1 	"/>
	<line class="st4" x1="41.3" y1="111.8" x2="43.5" y2="110.6"/>
	<polyline class="st4" points="106.6,113.1 101.1,111.5 98.9,109.5 	"/>
	<line class="st4" x1="101.1" y1="111.5" x2="98.7" y2="112"/>
	<path class="st5" d="M70.9,64.7c0,0,1.9-4.1,3.9-1.4c1.9,2.5-2.9,7.3-2.9,7.3s-4.5,1.8-7.4-0.2s2.8-3.5,2.8-3.5
		c-0.9-1.2-1.4-2.5-1.5-4c0-2,2.4-4.3,3.4-1.1"/>
	<path class="st5" d="M81.7,118.5c0,0,2.8,1.1,1,2.5c-1.6,1.3-4.7-1.7-4.7-1.7s-1.2-2.9-0.1-4.8s2.4,1.7,2.4,1.7
		c0.7-0.6,1.6-1,2.5-1.1c1.3-0.1,2.9,1.5,0.8,2.2"/>
	<path class="st6" d="M62.8,111c0,0-5.3,0.2-4.5,5.6c0.2,2.6,2.5,4.5,5,4.3c0.3,0,0.6-0.1,1-0.2"/>
	<path class="st6" d="M53.8,78.7c0,0,3.3-4.3-1.5-7.1s-6.9,2.1-6.9,2.1"/>
	<path class="st6" d="M103.3,123.2c0,0-1.9-2.4-4.5-1.5c-2.8,0.9-4.8,1.6-4.8,1.6"/>
	<path class="st6" d="M46.6,96.9c0,0,1.4,2.7,4.1,2.5s5.1-0.4,5.1-0.4"/>
	<path class="st6" d="M70.8,52.8c0,0,2.7-1.5,2.3-4.3s-0.7-5.1-0.7-5.1"/>
</g>
<filter id="goo">
      <feGaussianBlur color-interpolation-filters="sRGB" in="SourceGraphic" stdDeviation="13" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -9"/>
    </filter>
   <filter id="goo-2">
      <feGaussianBlur color-interpolation-filters="sRGB" in="SourceGraphic" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -9"/>
    </filter>
</svg>

            
          
!
            
              body {
  background: lighten(lightblue, 8%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  height: 100%;
  width: 100%;
}

#circles, {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

polygon {
  -webkit-filter: url("#goo-2");
  filter: url("#goo-2");
}

 



            
          
!
            
              //http://www.loopdeloop.org/post/163126420754/waiting-for-my-pizza-to-arrive-sander-bongers

TweenLite.set("#Layer_1", {
  transformOrigin: "center center",
  scale: 0.8
});

TweenLite.set("#slice-1, #slice-1-left, #slice-1-right", {
  transformOrigin: "top center"
});

function moveSlice() {
  // rotate 1st pizza slice
  TweenLite.fromTo(`#slice-1`, 0.7,
    { rotation: 0 },
    { rotation: 60, ease: Power1.easeInOut });
  
  // rotate left side goo
  TweenLite.fromTo( `#slice-1-left`, 1,
    { rotation: 0 },
    { rotation: 60, ease: Power2.easeOut, delay: 0.4 });

  // scale down left side goo
  TweenLite.fromTo(`#slice-1-left *`,1.1,
    { scale: 1 },
    { scale: 0, ease: Power1.easeOut, delay: 0.3 });
  
  // rotate right side goo
  TweenLite.fromTo(`#slice-1-right`,1.1,
    { rotation: 0 },
    { rotation: -60, ease: Power2.easeOut, delay: 0.3 });

  // scale down right side goo
  TweenLite.fromTo(`#slice-1-right *`, 1,
    { scale: 1 },
    { delay: 0.15, scale: 0, ease: Power1.easeOut });
  
  // rotate whole pizza backwards and repeat function
  TweenLite.to("#Layer_1", 0, { delay: 2.2, rotation: "-=60", onComplete: moveSlice});
}

moveSlice();

            
          
!
999px
Loading ..................

Console