<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

  <g id="pizzaBase">
    <circle cx="400" cy="300" r="110.05" fill="#EEB554"/>
    <circle cx="400" cy="300" r="99.23" fill="#EDC387"/>
    <path d="m425.22,394.11l.93,3.49m-51.36-191.69l-.93-3.49m43.69,197.08l-.63-3.55m-33.83-191.88l-.63-3.55m26.35,200.14l-.31-3.59m-16.98-194.1l-.31-3.59m8.81,198.07v3.61m0-198.45v-3.61m-8.81,201.67l.31-3.59m16.98-194.1l.31-3.59m-26.35,200.14l.63-3.55m33.83-191.88l.63-3.55m-43.69,197.08l.93-3.49m50.43-188.2l.93-3.49m-60.7,192.52l1.23-3.39m66.64-183.09l1.23-3.39m-77.25,186.5l1.52-3.27m82.34-176.59l1.52-3.27m-93.21,179.06l1.8-3.12m97.42-168.74l1.8-3.12m-108.46,170.25l2.07-2.96m111.76-159.61l2.07-2.96m-122.89,160.15l2.32-2.76m125.24-149.26l2.32-2.76m-136.38,148.83l2.55-2.55m137.77-137.77l2.55-2.55m-148.83,136.38l2.76-2.32m149.26-125.24l2.76-2.32m-160.15,122.89l2.96-2.07m159.61-111.76l2.96-2.07m-170.25,108.46l3.12-1.8m168.74-97.42l3.12-1.8m-179.06,93.21l3.27-1.52m176.59-82.34l3.27-1.52m-186.5,77.25l3.39-1.23m183.09-66.64l3.39-1.23m-189.04,59.77l-3.49.93m195.17-52.3l-3.49.93m-193.6,42.76l3.55-.63m191.88-33.83l3.55-.63m-200.14,26.35l3.59-.31m194.1-16.98l3.59-.31m-201.67,8.81h3.61m194.84,0h3.61m-198.08-8.49l-3.59-.31m201.29,17.61l-3.59-.31m-196.54-26.03l3.55.63m191.88,33.83l3.55.63m-193.6-42.76l-3.49-.93m191.69,51.36l3.49.93m-192.52-60.7l3.39,1.23m183.09,66.64l3.39,1.23m-183.23-75.73l-3.27-1.52m183.13,85.39l-3.27-1.52m-175.79-91.69l3.12,1.8m168.74,97.42l3.12,1.8m-170.25-108.46l2.96,2.07m159.61,111.76l2.96,2.07m-160.15-122.89l2.76,2.32m149.26,125.24l2.76,2.32m-146.28-133.83l-2.55-2.55m140.33,140.33l2.55,2.55m-136.38-148.83l2.32,2.76m125.24,149.26l2.32,2.76m-122.89-160.15l2.07,2.96m111.76,159.61l2.07,2.96m-108.46-170.25l1.8,3.12m97.42,168.74l1.8,3.12m-91.69-175.79l-1.52-3.27m83.87,179.86l1.52,3.27m-77.25-186.5l1.23,3.39m66.64,183.09l1.23,3.39" fill="none" opacity=".13" stroke="#AC2804" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>

  </g>
	<g id="pepper">
		
		</g>
  <g id="ingredientGroup">
       <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
       <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
       <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <path class="salami ingredient" d="m400,82.79c-8.16,0-14.78-6.62-14.78-14.77,0-8.16,6.62-14.78,14.78-14.78,8.16,0,14.77,6.61,14.77,14.78,0,8.16-6.61,14.77-14.77,14.77Z" fill="#AC2804"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>
    <ellipse class="olive ingredient" cx="400" cy="68.01" rx="4.5"  fill="none" stroke="#1E2D2F" stroke-width="6"/>		
	</g>
    <g id="egg" >
      <path id="white" class="eggBits" d="m422.13,312.56c-5.2,12.98-18.44,16.05-31.55,10.84-13.07-5.32-20.49-16.7-15.24-29.67,5.15-12.88,21.01-22.44,34.07-17.12,13.11,5.21,17.92,23.1,12.71,35.95Z" fill="#ebe3ce"/>
      <circle id="yolk" class="eggBits" cx="400" cy="300" r="11.48" fill="#ee8421"/>
    </g>		
		<path id="eggShine" d="m392.87,298.02c.07-.58.22-1.15.46-1.71,1.15-2.62,3.98-3.99,6.67-3.41" fill="none" stroke="#fff"
					stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>	
</svg>

body {
 background-color: #523249;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

.ingredient {
	opacity: 0
}

gsap.config({trialWarn: false});
console.clear();
let select = s => document.querySelector(s),
		q = gsap.utils.selector(document),
		toArray = s => gsap.utils.toArray(s),
		pizzaSpinDuration = 4,
		mainSVG = select('#mainSVG'),
		pizzaBase = select('#pizzaBase'),
		allIngredients = toArray('.ingredient'),
		allMushrooms = toArray('.mushroom'),
		allSalami = toArray('.salami'),
		allOlive = toArray('.olive'),
		allPeppers = toArray('.pepper')

gsap.set('svg', {
	visibility: 'visible'
})
let pizzaProp = gsap.getProperty('#pizzaBase');

function addToPizza(el) {
	let pizzaRot = pizzaProp('rotation');
	//console.log(pizzaRot)
	gsap.set(el, {
		rotation: 360-pizzaRot,
		svgOrigin: '400 300'
	})
	pizzaBase.appendChild(el);
	
}

function reset () {
	
	allIngredients.forEach((c) => {
		select('#ingredientGroup').appendChild(c);
		gsap.set(c, {
			rotation: 0,
			y: 0
		})
	})
	gsap.set('#egg .eggBits', {
		scale: 0,
		svgOrigin: '400 300'		
		
	}) 	
	gsap.set('#eggShine', {
		opacity: 0	
	}) 	
}
let tl = gsap.timeline({repeat: -1, onRepeat: reset});
tl.to('#pizzaBase', {
	duration: pizzaSpinDuration,
	rotation: -360,
	repeat: 2,
	svgOrigin: '400 300',
	ease: 'none'
})
.to('#egg', {
	duration: pizzaSpinDuration,
	rotation: -360,
	repeat: 2,
	ease: 'none'
}, 0)

.to(allMushrooms, {
	duration: 1.2,
	opacity: 1,
	y: '+=158',
	stagger: {
		each: pizzaSpinDuration/allMushrooms.length,
		//from: 'random',
		onComplete:function(){
      //fade out each target when it completes
      addToPizza(this.targets()[0])
    }
	},
	ease: 'power3.in'
}, 0.47)
.to(allPeppers, {
	opacity: 1,
	y: '+=200',
	stagger: {
		each: pizzaSpinDuration/allPeppers.length,
		//from: 'random',
		onComplete:function(){
      //fade out each target when it completes
      addToPizza(this.targets()[0])
    }
	},
	ease: 'power1.in'
}, 1)
.to(allSalami, {
	opacity: 1,
	//duration: 0.5,
	y: '+=152',
	stagger: {
		each: pizzaSpinDuration/allSalami.length,
		//from: 'random',
		onComplete:function(){
      //fade out each target when it completes
      addToPizza(this.targets()[0])
    }
	},
	ease: 'power3.in'
}, 1.5)
.to(allOlive, {
	opacity: 1,
	//duration: 0.5,
	y: '+=180',
	stagger: {
		each: pizzaSpinDuration/allOlive.length,
		//from: 'random',
		onComplete:function(){
      //fade out each target when it completes
      addToPizza(this.targets()[0])
    }
	},
	ease: 'power3.in'
}, 0.78)

.to('#egg .eggBits', {
	duration: 1,
	scale: 1,
	stagger: {
		amount: 0.2
	},
	//opacity: 1,
	ease: 'elastic(0.6, 0.5)'
}, '-=4')
.to('#eggShine', {
	opacity: 0.6,
}, '-=3.65')
.to('.ingredient, #egg, #eggShine', {
	opacity: 0
}, '-=0.5')
gsap.globalTimeline.timeScale(1.25)
//.call(addToPizza, [mushroom])
reset()
//ScrubGSAPTimeline(tl)