css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="main-container" class="burger-container">

<svg id="burger" preserveAspectRatio="true" width="100%" height="100%" viewBox="0 0 550 400">
<defs>
<g id="Layer12_0_FILL">
<path fill="#FFFEFE" stroke="none" d="
M 302.7 216.45
L 302.6 200 274.15 200 274.25 216.45 302.7 216.45 Z"/>

<path fill="#CC4133" stroke="none" d="
M 342.5 216.45
L 342.5 200 302.6 200 302.7 216.45 342.5 216.45 Z"/>
</g>

<g id="Layer11_0_FILL">
<path fill="#FFFEFE" stroke="none" d="
M 234.4 200
L 205.8 200 205.8 216.45 234.5 216.45 234.4 200 Z"/>

<path fill="#CC4133" stroke="none" d="
M 274.25 216.45
L 274.15 200 234.4 200 234.5 216.45 274.25 216.45 Z"/>
</g>

<g id="Layer10_0_FILL">
<path fill="#ADCD7B" stroke="none" d="
M 331.6 201.1
Q 337.05 197 342.5 201.1 347.6 207.2 357.1 202.95 348.35 190.7 344.35 187.7
L 202.15 187.7 189.35 201.1
Q 195.1 207.95 204.95 201.65 205.05 201.55 204.85 201.5 204.6 201.4 208.15 200.55 211.6 199.75 214.9 202.95
L 227.65 202.95
Q 233.95 197.75 240.4 202.95 242.8 207.2 251.35 205.5
L 255 202.95
Q 258.4 198.3 265.95 201.1 272.15 207.6 278.7 203.5
L 282.35 201.1
Q 286.75 199.3 291.45 201.1
L 295.1 203.5
Q 298.3 205.6 301.6 204.05 301.9392578125 203.698046875 302.25 203.35 309.9900390625 196.0552734375 318.8 202.95 323.85 209.05 331.6 201.1 Z"/>
</g>

<g id="Layer8_0_FILL">
<path fill="#F6E7B5" stroke="none" d="
M 339.2 229.85
Q 354.079296875 222.867578125 341.2 216.05
L 207.75 216.45
Q 192.3 222.7 209.25 229.85
L 339.2 229.85 Z"/>
</g>

<g id="Layer7_0_FILL">
<path fill="#934949" stroke="none" d="
M 348.25 231.75
Q 347.15 230.75 344.15 229.85
L 203.75 229.85
Q 185.65 242.7 198.5 254.35 199.5 255.35 200.65 256.25
L 346.15 256.25
Q 361.85 245.4 348.25 231.75 Z"/>
</g>

<g id="Layer6_0_FILL">
<path fill="#B85959" stroke="none" d="
M 230.75 236.3
Q 228.95 236.3 227.65 237.6 226.4 238.85 226.4 240.7 226.4 242.5 227.65 243.75 228.95 245.05 230.75 245.05 232.6 245.05 233.85 243.75 235.15 242.5 235.15 240.7 235.15 238.85 233.85 237.6 232.6 236.3 230.75 236.3
M 216.9 241.05
Q 216.55 237.6 212.25 236.85
L 204.95 236.85
Q 199.95 237.65 200.3 240.95 200.6 244.25 205.15 244.85
L 211.9 244.85
Q 217.25 244.4 216.9 241.05 Z"/>
</g>

<g id="Layer5_0_FILL">
<path fill="#EAB473" stroke="none" d="
M 250.35 116.5
L 253.2 116.15 251.35 116.15 250.35 116.5
M 293 115.9
L 285.35 114.9 283.25 114.9 293 115.9
M 236.15 120.6
L 239.15 119.8 238.4 119.9 237.85 120.05 237.95 120 236.15 120.55 236.15 120.6
M 239.15 119.8
L 236.15 120.6 235.05 121.6 239.15 119.8
M 353.8 188.35
Q 358.55 187.9 358 182.7 356 164.55 345.7 149.8 336.2 136.3 322.55 127.9 308.8 119.55 293.3 115.9 279.6 116.8 283.55 119.8 306.8 137.6 310.9 140.95 314.9 144.3 316.65 147.35 318.35 150.25 319.1 152.6 319.75 154.9 320.65 158.1
L 313.35 169.05 190.1 169.05
Q 188.35 179.25 188.8 183.9
L 189.2 188.1
Q 195.3 188.35 211.05 188.6 226.75 188.8 242.5 189 257.9 189.1 273.5 189.15 288.55 189.25 303.7 189.15 321.2 189.1 338.6 189.1 346.35 189.1 353.8 188.35 Z"/>

<path fill="#F6D8B4" stroke="none" d="
M 239.15 119.8
L 235.05 121.6 224 127.1 221.55 129.35
Q 197.55 143.75 190.1 169.05
L 313.35 169.05 320.65 158.1
Q 319.75 154.9 319.1 152.6 318.35 150.25 316.65 147.35 314.9 144.3 310.9 140.95 306.8 137.6 283.55 119.8 279.6 116.8 293.3 115.9
L 293 115.9 283.25 114.9 285.35 114.9
Q 281.45 114.5 277.6 114.25 265.2 113.6 253.2 116.15
L 250.35 116.5 238.4 119.9 239.15 119.8 Z"/>
</g>

<g id="Layer3_0_FILL">
<path fill="#EAB473" stroke="none" d="
M 196.4 258
Q 194.3 260.35 194.85 263.65 195.75 259.75 199.1 256.9
L 197.75 256.9
Q 197.05 257.35 196.4 258
M 347.6 284.25
L 347.6 283.9 346.9 284.25 347.6 284.25
M 347.6 257
L 347.6 256.9 346.9 256.9 347.6 257
M 352.25 263.65
Q 352.25 262.3 352.1 260.9 351.9 259.9 351.35 259.1 350.7 258.25 349.9 257.7 348.8 257.25 347.6 257
L 346.9 256.9 308.4 256.9
Q 313.05 257.7 317.9 258.55 319.1 264 306.95 269.5
L 194.85 269.5
Q 195.1 274.7 196.4 279.7 196.85 281.5 198.4 282.95 199.2 283.7 200.3 284.25
L 346.9 284.25 347.6 283.9
Q 351.9 282.05 352.1 277.5 352.25 270.55 352.25 263.65 Z"/>

<path fill="#F6D8B5" stroke="none" d="
M 306.95 269.5
Q 319.1 264 317.9 258.55 313.05 257.7 308.4 256.9
L 199.1 256.9
Q 195.75 259.75 194.85 263.65
L 194.85 269.5 306.95 269.5 Z"/>
</g>


<path id="Layer12_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 302.6 200
L 342.5 200 342.5 216.45 302.7 216.45 274.25 216.45 274.15 200 302.6 200 302.7 216.45"/>

<path id="Layer11_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 234.4 200
L 274.15 200 274.25 216.45 234.5 216.45 205.8 216.45 205.8 200 234.4 200 Z"/>

<path id="Layer10_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 227.65 202.95
Q 233.95 197.75 240.4 202.95 242.8 207.2 251.35 205.5
L 255 202.95
Q 258.4 198.3 265.95 201.1 272.15 207.6 278.7 203.5
L 282.35 201.1
Q 286.75 199.3 291.45 201.1
L 295.1 203.5
Q 298.3 205.6 301.6 204.05 301.9392578125 203.698046875 302.275 203.375 309.9900390625 196.0552734375 318.8 202.95 323.85 209.05 331.6 201.1 337.05 197 342.5 201.1 347.6 207.2 357.1 202.95 348.35 190.7 344.35 187.7
L 202.15 187.7 189.35 201.1
Q 195.1 207.95 204.95 201.65 205.05 201.55 204.85 201.5 204.6 201.4 208.15 200.55 211.6 199.75 214.9 202.95
M 301.6 204.05
L 300.6 204.75"/>

<path id="Layer8_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 207.75 216.45
L 341.2 216.05
Q 354.079296875 222.867578125 339.2 229.85
L 209.25 229.85
Q 192.3 222.7 207.75 216.45 Z"/>

<path id="Layer7_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 203.75 229.85
L 344.15 229.85
Q 347.15 230.75 348.25 231.75 361.85 245.4 346.15 256.25
L 200.65 256.25
Q 199.5 255.35 198.5 254.35 185.65 242.7 203.75 229.85 Z"/>

<path id="Layer5_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 293.3 115.9
Q 308.8 119.55 322.55 127.9 336.2 136.3 345.7 149.8 356 164.55 358 182.7 358.55 187.9 353.8 188.35 346.35 189.1 338.6 189.1 321.2 189.1 303.7 189.15 288.55 189.25 273.5 189.15 257.9 189.1 242.5 189 226.75 188.8 211.05 188.6 195.3 188.35 189.2 188.1 187.45 180.05 190.1 169.05 197.55 143.75 221.55 129.35
M 253.2 116.15
Q 265.2 113.6 277.6 114.25 281.45 114.5 285.35 114.9
L 293 115.9 293.3 115.9
M 239.15 119.8
L 236.15 120.6
M 293 115.9
L 283.25 114.9 285.35 114.9"/>

	
	
	
<g id="seed-1">
<path fill="#6B3452" stroke="none" d="
M 222.75 169.55
Q 223.45 169.45 224.05 168.95 224.6 168.4 224.8 167.7 225.2 166.05 223.85 165.05 223.05 164.65 222.65 164.4
L 221.65 163.85
Q 221 163.5 219.95 163.3 218.8 163.1 218.2 162.95 216.2 162.5 215.55 162.65 214.85 162.8 214.35 163.3 213.8 163.85 213.65 164.5 213.5 165.2 213.75 165.9 214 166.6 214.5 167 215.2 167.55 216.9 167.85
L 218.95 168.3 219.35 168.45 219.8 168.75
Q 220.65 169.25 221.3 169.45 222.25 169.65 222.75 169.55 Z"/>
</g>

<g id="seed-2" >
<path fill="#6B3452" stroke="none" d="
M 255.75 157.35
L 257 156.1
Q 257.8 155.05 257.5 153.85 257.25 152.6 256.1 152 254.95 151.45 253.8 152.1 253.35 152.35 252.85 152.95 252.15 153.85 252.05 153.95 251.7 154.35 250 155.55 248.75 156.65 248.55 157.65 248.4 158.4 248.75 159.1 249.05 159.85 249.75 160.25 251.15 161.1 252.6 160.15
L 253.7 159.2
Q 254.15 158.8 255.1 158.05 255.35 157.85 255.75 157.35 Z"/>
</g>

<g id="seed-3">
<path fill="#6B3452" stroke="none" d="
M 270.45 128.65
Q 269.85 127.55 269.45 127.05
L 268.6 126.1
Q 267.65 124.95 266.75 124.65 265.4 124.15 264.3 125.05 263.2 126 263.45 127.4 263.6 128.3 264.8 129.5 265.3 129.9 265.45 130.15 265.6 130.35 265.85 130.95 266.3 132.05 266.85 132.6 267.55 133.4 268.55 133.55 269.9 133.8 270.85 132.6 271.7 131.5 271.2 130.15
L 270.45 128.65 Z"/>
</g>

<g id="seed-4">
<path fill="#6B3452" stroke="none" d="
M 275.2 172.25
Q 274.5 172.35 274.15 172.3
L 273.35 172.2
Q 271.85 171.95 270.9 173 269.8 174.1 270.3 175.45 270.65 176.5 271.9 177.05 272.9 177.5 274.2 177.4 274.95 177.4 276.5 177.2 277.5 177.1 278.5 177.2 278.89921875 177.2443359375 279.2 177.25 279.5775390625 177.277734375 279.8 177.25 280.55 177.15 281.15 176.55 281.7 175.95 281.85 175.2 282.1 173.5 280.6 172.6 279.987890625 172.2173828125 279.2 172.1 278.9583984375 172.1 278.7 172.1 277.35 172.15 276.7 172.15
L 275.2 172.25 Z"/>
</g>

<g id="seed-5">
<path fill="#6B3452" stroke="none" d="
M 295.3 151.85
Q 294.6 151.55 293.8 151.8 293 152.05 292.5 152.65 292.05 153.3 292 154.15 292 155 292.4 155.65 292.65 156.05 293.35 156.75
L 294.55 157.9
Q 294.9 158.35 295.55 159.25 296.15 159.85 297.05 159.95 297.95 160.05 298.65 159.55 299.35 159.1 299.65 158.25 299.9 157.45 299.65 156.6
L 299.3 155.8
Q 298.7 154.9 298.1 154.2
L 296.7 152.85
Q 295.95 152.1 295.3 151.85 Z"/>
</g>

<g id="seed-6">
<path fill="#6B3452" stroke="none" d="
M 300.75 135.6
Q 301.35 137.1 303 137.2 303.85 137.2 304.95 136.65 305.55 136.35 306.8 135.7
L 309.4 134.85
Q 310.75 134.2 310.85 132.7 310.95 131.15 309.65 130.45 309.60234375 130.4240234375 309.55 130.4 308.4916015625 129.865234375 307.2 130.2 306.9828125 130.243359375 306.5 130.4 305.8748046875 130.60390625 304.8 131
L 304 131.3 302.35 132.2
Q 301.65 132.6 301.3 132.95 300.8 133.45 300.65 134.2 300.5 134.95 300.75 135.6 Z"/>
</g>

	
	
	
	
	
	
	
	
	
	
	
	
<path id="Layer3_0_1_STROKES" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 347.6 283.9
Q 351.9 282.05 352.1 277.5 352.25 270.55 352.25 263.65 352.25 262.3 352.1 260.9 351.9 259.9 351.35 259.1 350.7 258.25 349.9 257.7 348.8 257.25 347.6 257
L 346.9 256.9 308.4 256.9
M 194.85 269.5
Q 195.1 274.7 196.4 279.7 196.85 281.5 198.4 282.95 199.2 283.7 200.3 284.25
L 346.9 284.25 347.6 283.9
M 346.9 256.9
L 347.6 256.9
M 194.85 263.65
Q 194.3 260.35 196.4 258 197.05 257.35 197.75 256.9
L 199.1 256.9 308.4 256.9
M 194.85 263.65
L 194.85 269.5"/>

<path id="Layer2_0_1_STROKES" class="melting-cheese" stroke="#F6E7B5" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 259.75 225.75
L 315.1 225.75 337.85 225.75
M 256.9 225.75
Q 257.9 225.75 259 225.75
M 212.35 225.65
L 255.9 225.75
Q 256.3 225.65 256.65 225.75 256.75 225.75 256.9 225.75"/>

<path id="Layer2_0_2_STROKES" class="melting-cheese" stroke="#6B3452" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 257.65 229.85
L 284 261.25 314.5 229.85"/>
</defs>



<g id="bottom-bun" class="item element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer3_0_FILL"/>
	<use xlink:href="#Layer3_0_1_STROKES"/>
</g>	


<g id="beef" class="item element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer7_0_FILL"/>
	<use xlink:href="#Layer7_0_1_STROKES"/>
	<use xlink:href="#Layer6_0_FILL"/>
</g>

<g id="still-cheese" class="item element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer8_0_FILL"/>
	<use xlink:href="#Layer8_0_1_STROKES"/>
</g>
	
<g id="melt" class="element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer2_0_2FILL"/>
	<use xlink:href="#Layer2_0_1_STROKES"/>
	<use xlink:href="#Layer2_0_2_STROKES"/>
</g>
	
<g id="right-tomato" class="item element tomatoes" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer12_0_FILL"/>
	<use xlink:href="#Layer12_0_1_STROKES"/>
</g>

<g id="left-tomato" class="item element tomatoes" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer11_0_FILL"/>
	<use xlink:href="#Layer11_0_1_STROKES"/>
</g>

	
<g id="lettuce" class="item element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer10_0_FILL"/>
	<use xlink:href="#Layer10_0_1_STROKES"/>
</g>



<g id="top-bun" class="item element" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use xlink:href="#Layer5_0_FILL"/>
	<use xlink:href="#Layer5_0_1_STROKES"/>
</g>

	
<g class="element" id="seed-group" transform="matrix( 1, 0, 0, 1, 0,0) ">
	<use class="seeds" xlink:href="#seed-1"/>
	<use class="seeds" xlink:href="#seed-2"/>
	<use class="seeds" xlink:href="#seed-3"/>
	<use class="seeds" xlink:href="#seed-4"/>
	<use class="seeds"xlink:href="#seed-5"/>
	<use class="seeds" xlink:href="#seed-6"/>
</g>




	
	
</svg>

</div>
            
          
!
            
              body {
	margin: 0;
	padding: 0;
}
.burger-container {
	position: absolute;
	width: 100%;
	height: 99%;
}


.melting-cheese {
	position: relative;
	fill: #f6e7b5;
}



            
          
!
            
              (function(){
	var fullSVG = document.getElementById('burger'),
		bg = document.getElementById('main-container'),
		topBun = document.getElementById('top-bun'),
		lettuce = document.getElementById('lettuce'),
		beef = document.getElementById('beef'),
		bottomBun = document.getElementById('bottom-bun'),
		stillCheese = document.getElementById('still-cheese'),
		seeds = document.getElementById('seed-group'),
		tomatoes = document.getElementsByClassName('tomatoes'),
		meltingCheese = document.getElementsByClassName('melting-cheese'),
		elements = document.getElementsByClassName('element');

		TweenMax.set(meltingCheese, { y:"-30%", opacity: 0});

		startItems = new TimelineLite();
		startItems.staggerFromTo('.item', 0.6 , {width: '50%', x: "50%", y: "-500%", opacity: 1, scale: 0, ease: Bounce.easeIn}, {width: '100%', x: "0%", y: "0%", scale: 1, ease: Bounce.easeOut }, 0.1)
		.staggerFrom(".seeds", 0.1, {x: 5, opacity: 1, scale: 0, ease: Power0.easeNone, y: -500}, 0.1)
		.to(".seeds", 0.1, {y: "0%"})
		.to(topBun, 0.1 ,{y: "-100%", onStart: throwSeeds})
		.to(lettuce, 0.1 ,{y: "-40%"})
		.to(topBun, 0.1 ,{y: "-0%", onComplete: squeeze})

		TweenMax.fromTo(meltingCheese, 1, { y:"-50%", opacity: 0}, {height: "120%", y: "-8%", opacity: 1, ease:Expo.easeOut, delay: 0.6 } );

		function squeeze() {
			TweenMax.to(lettuce, 0.1 ,{y: "0%"});
			TweenMax.fromTo(beef, 0.5, {x: "-3%", scale: 1.05}, {x: "0%", scale: 1});
			TweenMax.fromTo(topBun, 0.5, {x: "-3%", scale: 1.05}, {x: "0%", scale: 1});
		}

		function throwSeeds(){
			var seedToss = 0.2;
			TweenMax.staggerTo(".seeds", seedToss, {scale: 1.1,  x: "10", ease: Elastic.easeNone, y: -300});
			TweenMax.staggerTo(".seeds", seedToss, {scale: 1, x: "0", delay: seedToss, ease: Elastic.easeNone, y: 0});
		}


})();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console