cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              	<section>
		<svg x="0px" y="0px"  viewBox="0 0 1016.4 800">
			<style type="text/css">
				.st0{fill:#CCE9FF;}
				.st1{fill:none;stroke:#2D2D2D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
				.st2{fill:none;}
				.st3{fill:#B109AA;}
				.st4{font-family:'Quicksand-Bold';}
				.st5{font-size:18px;}
				.st6{fill:url(#SVGID_1_);}
				.st7{clip-path:url(#SVGID_3_);}
				.st8{fill:#EEF9FF;}
				.st9{opacity:0.5;fill:#4C6F89;}
				.st10{fill:#FFFFFF;}
				.st11{clip-path:url(#SVGID_5_);}
				.st12{fill:none;stroke:#605245;stroke-width:9;stroke-linecap:round;stroke-miterlimit:10;}
				.st13{clip-path:url(#SVGID_7_);}
				.st14{clip-path:url(#SVGID_9_);}
				.st15{fill:#2D2D2D;}
				.st16{fill:#D3803C;}
				.snow-splash{fill:#FFFFFF;}
			</style>
			<g id="Background">
				<rect class="st0" width="1016.4" height="800"/>
			</g>
			<g id="Text">
				<g id="handlettering">
					<path id="first" class="st1" d="M152.4,222.5c19.1,0.4,37.9-11.2,47.3-27.5c2.1-3.7,4.2-7.7,5.6-11.7c2.6-7.6,0.2-17-7.9-20
						c-9.4-3.5-20.1,1.5-28.5,5.4c-40.8,19-56.8,75.8-22,89.2s82.2,13,58.5,58.8s-58.5,42.8-69.2,31.2s-9.5-35,20.5-46.8
						c30-11.7,58.2-14.2,69.2-20c6.3-3.3,12.8-6.5,18.3-11.2c5.3-4.5,16.6-18,8.8-24.9c-7.8-6.9-21.2,10.6-24.7,16.1
						c-4.9,7.9-7.6,17.3-7.5,26.6c0.1,6,2.1,18,10,18.5c11,0.8,19.8-4.2,24.5-17.8c0,0,2.7-31,20.5-41.2c0,0,11.5-7,15,1.2
						c0,0-2.7-8.1-15-1.2c0,0-15.5,6.5-20.5,41.2c0,0-1.4,13.6,9.6,16c11,2.4,21.1-18.6,21.2-21s1.4-37.9,7.8-38.1
						c0,0-7.6-0.7-7.7,38.1c0,4.4,1,8.9,3,12.7c0.6,1.2,1.4,2.3,2.5,3c1.2,0.8,2.8,1.1,4.3,0.9c3.1-0.3,6-2,8.2-4.2
						c6.3-6.3,11.1-15.9,15.3-23.7c4.6-8.6,9.2-18.2,10.1-28.1c1.8-19.5-12.2-8.2-13.8-0.6c-1.5,7.6-1,17.7,15.5,37.2
						c7.9,9.4,11,23,5.5,34.3c-4.1,8.5-19.8,18.3-25.6,5.6c-1.7-3.7-1.5-8-0.8-12c2.1-11.9,8.2-21.4,16.4-29.9
						c5.5-5.8,13.4-12.6,16.5-20.2c1.6-4,5.4-27.5,19.2-29.2c-18,2.3-20.3,33.9-16.1,46.6c0.9,2.7,2.5,5.5,5.2,6.5
						c2.5,1,5.4,0.1,7.7-1.3c8.2-5.2,11.1-17.1,13.6-25.9c1.6-5.8,5.8-17,2.8-23c-2.5-5-13.8-6.2-14.3-0.7s3.2,9.6,9,8.5
						c5.8-1.1,7.9-7.9,9.7-9.7c0,0,2.5-3.3,5.7,0.2c3.2,3.5,2.7,19.5-9.2,49.8c0,0,14.2-44.2,15.8-48c1.7-3.8,9.2-18.5,19.7-9.5
						c5.7,4.9,3.1,14.3,1,20.3c-2.8,8.3-8.8,16.3-9,25.2c0,2.1,0.3,4.3,1.7,5.8c1.2,1.3,2.9,1.9,4.6,1.9c4.8,0.2,9-3.3,11.8-7.2
						c6.1-8.5,11.5-17.7,16.8-26.7c5.2-8.6,10.5-17.5,14-27c5.7-15.5-7.3-17.5-9.8-8s-1.3,21.3,4.3,32s23,14.7,18,34.7
						s-17.5,28.7-24.7,26.2c-7.2-2.5-6.7-18.3,0.5-32c7.2-13.7,21-36.8,46.7-46.5"/>
					<path id="second" class="st1" d="M420.7,209.2c0,0,10.5-3.7,8.7,8c0,0-1.2,7.2-2.1,9.3"/>
					<path id="third" class="st1" d="M124.9,392c2.2-8.8,4.6-19.5,2.8-28.6c-1.7-8.2-8.2-16.1-16.6-16.4c-4.7-0.2-9.1,2-13,4.6
						c-9.1,6.3-15.9,15.5-21.5,25.1c-9.2,15.6-16,32.8-18.2,50.7c-1,8.1-1,16.4,1.2,24.2s6.8,15.2,13.7,19.6c3.5,2.3,7.7,3.7,11.9,3.4
						c6.2-0.4,11.5-4.5,15.9-8.9c14.8-14.7,21.9-33.2,24.7-53.6c13.3,36.6,24.9,90.9-2.4,123.8c-34.5,41.5-68,15.5-13-51
						c19.6-23.7,45.5-42.2,76.4-47.1c29.7-4.8,60.6,2.8,89.5,9c40.7,8.7,84.6,6.5,122.2-12.3c34.3-17.1,60.5-46.4,79.4-79.3"/>
					<path id="fourth" class="st1" d="M141.4,430c0,0,25-24.5,25-42c0-14.5-14.7-9.3-16.8,1.6c-3.2,17.2,12.4,24.7,25,13.7
						c0,0-18.8,44.2,2.2,28.8s28.8-39.5,29.2-44.2s0.8-11.8-3-14.8s-14.5,2.8-15.5,22.5s6,28.8,16.8,26.5s30.8-34,31-38.8
						c0,0,4-9.8-1.2-12.2s-11.5,4.2-15.5,15.8s-3,31.2,7,30.2s20.5-11.2,22.8-24.5s-2.2-38,21-72.5c0,0-26.7,32.7-18.3,80.7
						c0,0,6.3,36.3,18.3,10.1c0,0,3.8-13.2,5-35.2c0,0-7.6,40.8,3.6,43c11.2,2.2,19.2-36,19.7-37.8s2.5-16.5,10.4-14.9
						c7.9,1.6-0.6,50.6-3.6,54.6c0,0,11-55.2,26.8-61.5c0,0,9.5-2,4.7,16.8c-2.3,9.1-6.7,22.3-3.7,31.6c0.2,0.6,0.4,1.1,0.9,1.5
						c1,0.8,2.5,0,3.5-0.8c7.5-6.1,11.4-15.2,11.4-24.8c0-9.6,0.6-20.2,4.7-29c3.3-7.1,9.8-13.1,17.6-13.6c-8,0.4-14.8,6.8-18,14.2
						c-3.2,7.4-3.3,15.7-3,23.7c0.2,3.9,0.5,7.8,1.7,11.5c0.6,1.9,1.7,3.9,3.6,4.7c7.3,3,14.2-11.5,16.3-16.4
						c3.3-7.9,5.2-16.8,5.2-25.4c0,0,18.5,65-6,109.3c0,0-8.5,14.2-20.5,8.7c-10.2-4.7,1.7-30,4-36.1c11.7-30.2,26.7-59.7,42.3-88
						c3.9-7.1,7.7-14.1,11.5-21.2c1-1.8,1.9-3.6,2.1-5.7c0.2-2-0.5-4.3-2.2-5.3c-2.4-1.5-5.7,0-7.2,2.4c-2,3.1-2.1,7.6-1.5,11.2
						c1.5,10.5,10.9,18.8,15.2,28.2c4.6,10.1,3.9,22.6-2.2,31.9c-2.9,4.4-6.9,7.5-12.3,7.6c-8.2,0.2-14.5-18.8,2.8-43.5s30-32,30-32"/>
					<path id="fifth" class="st1" d="M219,352c0,0-2-33.3,43.7-21.6c45.7,11.6,57,20.3,76.7,0.6"/>
					<path id="sixth" class="st1" d="M277.6,352c0,0-1.8,4-1.8,6.8"/>
				</g>
				<rect x="177.4" y="507" class="st2" width="278" height="16"/>
				
			</g>
			<g id="Snowman">
				<g id="ground">
					<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="508.1894" y1="800" x2="508.1894" y2="728.5187">
						<stop  offset="0" style="stop-color:#B9E2FF"/>
						<stop  offset="5.941337e-02" style="stop-color:#C1E5FF"/>
						<stop  offset="0.2872" style="stop-color:#DCF1FF"/>
						<stop  offset="0.5188" style="stop-color:#F0F9FF"/>
						<stop  offset="0.7544" style="stop-color:#FBFDFF"/>
						<stop  offset="1" style="stop-color:#FFFFFF"/>
					</linearGradient>
					<path class="st6" d="M0,735c0,0,53.4,7,134.7-3s212.2,4.8,236.3,3.9c24.1-0.9,202-11,257.9-5.9s180.4,10,209.6,9s144.8-9,177.9-9
						v70H0V735z"/>
				</g>
				<ellipse id="shadow" class="st9" cx="707.9" cy="751.9" rx="138.5" ry="16.9"/>
				
				<ellipse id="shadowC" class="st9" cx="707.9" cy="751.9" rx="138.5" ry="16.9"/>
				<g id="bottom">
					<path id="bottomshape" class="st10" d="M874.5,597.8c0,5.9,2,12,1.4,17.7c-0.7,5.9-1,12-2.3,17.7c-1.3,5.8-6.3,10.5-8.2,16
						c-1.9,5.6-2.6,11.6-5.1,16.9c-2.6,5.3-4.6,11-7.7,16c-3.1,5-7.8,9-11.4,13.6c-3.7,4.6-7.3,9.3-11.4,13.4s-10.2,6.1-14.7,9.8
						c-4.6,3.7-8.5,8.1-13.4,11.2c-5,3.1-8.7,8.6-14,11.1c-5.3,2.5-11.6,2.8-17.2,4.7c-5.5,1.9-11.1,3.7-16.9,5
						c-5.7,1.3-11.4,2.9-17.3,3.6c-5.8,0.6-11.7-1-17.7-1s-11.5-1.4-17.3-2.1c-5.9-0.7-12.4,2.6-18,1.3c-5.8-1.3-10.1-7.4-15.6-9.3
						c-5.6-1.9-13,0.7-18.3-1.9c-5.3-2.6-10.4-6.1-15.3-9.2c-5-3.1-6.9-10.5-11.5-14.1c-4.6-3.7-11.7-4.4-15.8-8.5s-5.8-10.5-9.4-15.1
						c-3.7-4.6-6.8-9.3-10-14.2c-3.1-5-9.4-8.2-12-13.5c-2.5-5.3-1.2-12.2-3.1-17.8c-1.9-5.5-7.4-10.1-8.7-15.8
						c-1.3-5.7,1-12.1,0.3-17.9c-0.6-5.8-3.9-11.5-3.9-17.4c0-5.9,4.6-11.5,5.2-17.3c0.7-5.9-1-12,0.3-17.7c1.3-5.8,0.9-12.1,2.9-17.6
						c1.9-5.6,5.6-10.6,8.1-15.9c2.6-5.3,6.5-9.9,9.6-14.8c3.1-5,6.1-10.1,9.7-14.6c3.7-4.6,6-10.6,10.2-14.7s11.8-4.4,16.4-8.1
						c4.6-3.7,9.3-6.7,14.3-9.8c5-3.1,9.9-5.7,15.2-8.3c5.3-2.5,8.5-10,14.1-12c5.5-1.9,12-1,17.8-2.4c5.7-1.3,11.7,0,17.6-0.6
						c5.8-0.6,11.4-2.7,17.3-2.7s12.1-3.2,17.9-2.6c5.9,0.7,10.9,6.5,16.6,7.7c5.8,1.3,11.3,2.5,16.8,4.4c5.6,1.9,10.5,4.9,15.8,7.4
						c5.3,2.6,10,5.6,15,8.7c5,3.1,12.4,2.8,17,6.4c4.6,3.7,7.7,9.2,11.8,13.3s5.9,10.3,9.5,14.8c3.7,4.6,6.8,9.1,10,14.1
						c3.1,5,7.4,9,9.9,14.3c2.5,5.3,7.1,9.8,9,15.3c1.9,5.5,4.5,11.1,5.8,16.8c1.3,5.7-0.9,12.1-0.3,18
						C873.8,586.1,874.5,591.9,874.5,597.8z"/>
				</g>
				<ellipse id="shadowB" class="st9" cx="707.9" cy="751.9" rx="138.5" ry="16.9"/>
				<g id="left-arm">
					<line id="left-shoulder" class="st12" x1="534.3" y1="411.4" x2="618.8" y2="332"/>
					<g id="fore">
						<polyline id="_x3C_Path_x3E_" class="st12" points="590.3,562 597.6,526 597.6,526 534.3,411.4 			"/>
						<line class="st12" x1="625.4" y1="541.7" x2="597.6" y2="526"/>
					</g>
				</g>
				<g id="right-arm">
					<line id="right-shoulder" class="st12" x1="812.2" y1="322" x2="899.4" y2="396.3"/>
					<g id="fore_1_">
						<polyline class="st12" points="899.4,396.3 883.4,506 883.4,506 894,541.7 			"/>
						<line class="st12" x1="883.4" y1="506" x2="855.8" y2="539"/>
					</g>
				</g>
				
				<path id="body" class="st10" d="M839.5,383c0,6.4,0.4,13-0.6,19.1c-1,6.3-5.3,11.8-7.2,17.8c-2,6-3.5,12.1-6.4,17.7
					c-2.9,5.6-5.1,11.8-8.8,16.8c-3.7,5.1-10.8,7.3-15.2,11.7c-4.4,4.4-6.6,11.4-11.7,15.1c-5.1,3.7-10.8,6.8-16.4,9.7
					c-5.6,2.8-12.5,2.2-18.6,4.2c-5.9,1.9-11.4,5.1-17.7,6.1c-6.1,1-12.3,2.1-18.7,2.1c-6.4,0-12.3-3.1-18.4-4
					c-6.3-1-12.7-0.4-18.6-2.3c-6-2-11.5-5-17-7.9c-5.6-2.9-10.6-6.5-15.6-10.2c-5.1-3.7-12-5.3-16.5-9.8c-4.4-4.4-5.3-11.9-9-17
					c-3.7-5.1-9.6-8.7-12.5-14.3c-2.8-5.6-4-11.9-6-17.9c-1.9-5.9-2.8-12.1-3.8-18.3c-1-6.1-3.4-12.2-3.4-18.6c0-6.4,3.1-12.4,4-18.5
					c1-6.3-1.3-13.3,0.7-19.2c2-6,7.7-10.5,10.5-16.1c2.9-5.6,5.4-11.3,9-16.4c3.7-5.1,7.8-9.8,12.2-14.2c4.4-4.4,8.5-9.4,13.5-13.1
					c5.1-3.7,10.6-6.9,16.2-9.8c5.6-2.8,11.1-6.4,17.1-8.3c5.9-1.9,12.4-2.6,18.7-3.5c6.1-1,12.5-2.6,18.9-2.6
					c6.4,0,12.7,1.9,18.9,2.8c6.3,1,12.3,3.2,18.2,5.1c6,2,11.1,5.7,16.7,8.5c5.6,2.9,10.4,6.6,15.4,10.2c5.1,3.7,11.2,6,15.6,10.4
					c4.4,4.4,6.7,10.5,10.4,15.6c3.7,5.1,7,10,9.9,15.6c2.8,5.6,7.5,10.3,9.4,16.3c1.9,5.9,2.2,12.3,3.1,18.6
					C837,370.5,839.5,376.7,839.5,383z"/>
			
				<!-- <g id="head"> -->
					<path id="head" class="st10" d="M797,211.5c0,6.1,2.2,12.4,0.9,18.1c-1.3,5.9-4.6,11.4-7.1,16.7c-2.6,5.4-6.9,9.8-10.6,14.4
						c-3.7,4.7-6.5,10.5-11.2,14.2c-4.7,3.7-11.2,4.6-16.6,7.2c-5.3,2.6-10,7.5-15.9,8.8c-5.7,1.3-12,0.2-18.1,0.2
						c-6.1,0-12.1-0.1-17.9-1.4c-5.9-1.3-10.8-5.1-16.1-7.6c-5.4-2.6-12-3.4-16.6-7.2c-4.7-3.7-7.4-9.5-11.2-14.2
						c-3.7-4.7-6.8-9.6-9.4-15c-2.6-5.3-6.4-10.4-7.7-16.3c-1.3-5.7-1.4-11.9-1.4-18s0.6-12.2,1.9-17.9c1.3-5.9,3.2-11.8,5.8-17.1
						c2.6-5.4,6.5-10.2,10.2-14.8c3.7-4.7,8.8-7.8,13.5-11.6c4.7-3.7,9-7.7,14.4-10.3c5.3-2.6,10.5-6.3,16.4-7.6
						c5.7-1.3,12-0.1,18.1-0.1c6.1,0,12.1,0,17.8,1.3c5.9,1.3,11.7,3.2,17,5.8c5.4,2.6,10.6,5.7,15.3,9.5c4.7,3.7,9,8.1,12.7,12.8
						c3.7,4.7,7.3,9.6,9.9,15.1c2.6,5.3,3.8,11.3,5.2,17.2C797.5,199.4,797,205.3,797,211.5z"/>
					
				<!-- </g> -->
				<g id="face">
					<g id="eyes">
						<path class="st15 right" d="M702.5,190.2c0,1.9-1.9,3.4-2.8,5c-0.9,1.6-2,2.8-3.6,3.7c-1.6,0.9-3.1,2-5,2s-3.4-1.2-5-2.1
							c-1.6-0.9-3.4-1.6-4.3-3.2c-0.9-1.6-0.9-3.4-0.9-5.4c0-1.9,0.5-3.5,1.4-5.1c0.9-1.6,2.2-2.7,3.8-3.6c1.6-0.9,3.1-2.6,5-2.6
							c1.9,0,3.3,2.1,4.8,3c1.6,0.9,3.9,1.2,4.8,2.8C701.6,186.2,702.5,188.3,702.5,190.2z"/>
						<path class="st15 left" d="M737.8,185.5c1-1.6,3.5-1.8,5-2.6c1.6-0.8,3.2-1.3,5-1.2c1.8,0.1,3.7,0,5.3,1c1.6,1,2.2,2.9,3,4.4
							c0.8,1.6,2,3.2,1.9,5.1c-0.1,1.8-1.1,3.4-2.1,5c-1,1.6-2.4,2.7-4,3.5c-1.6,0.8-3.3,1.1-5.1,1c-1.8-0.1-4,0.5-5.6-0.5
							c-1.6-1-1.7-3.5-2.5-5.1c-0.8-1.6-2.6-3.1-2.5-5C736.4,189.4,736.8,187.1,737.8,185.5z"/>
					</g>
					<g id="mouth">
						<path class="st15 coal" d="M683.7,236.2c0,1.3-0.8,2.4-1.6,3.2s-1.9,1.8-3.2,1.8c-1.3,0-2.6-0.8-3.4-1.6c-0.8-0.8-1.4-2.2-1.4-3.4
							s0.4-2.8,1.2-3.6c0.8-0.8,2.4-1.2,3.6-1.2c1.3,0,2.2,0.9,3.1,1.8C682.8,234,683.7,235,683.7,236.2z"/>
						<path class="st15 coal" d="M696.4,246.3c0,1.3-0.2,2.5-1,3.3s-2.1,1.6-3.3,1.6c-1.3,0-2.3-0.9-3.1-1.7c-0.8-0.8-0.9-1.9-0.9-3.1
							s-0.4-2.8,0.4-3.7c0.8-0.8,2.4-1.5,3.7-1.5c1.3,0,2,1.5,2.9,2.3S696.4,245.1,696.4,246.3z"/>
						<path class="st15 coal" d="M712.3,252.6c0,1.3-0.2,2.5-1,3.3c-0.8,0.8-2,0.6-3.3,0.6s-2.7,0.5-3.6-0.4c-0.8-0.8-1-2.3-1-3.6
							s0.2-2.7,1-3.5c0.8-0.8,2.3-0.5,3.5-0.5s2,0.4,2.8,1.3C711.7,250.6,712.3,251.4,712.3,252.6z"/>
						<path class="st15 coal" d="M729.6,254.9c0,1.3,0.2,2.6-0.6,3.4c-0.8,0.8-2.1,1.8-3.4,1.8s-2.6-0.9-3.5-1.7c-0.8-0.8-1.6-2.2-1.6-3.5
							s1.4-2,2.3-2.8c0.8-0.8,1.6-1.3,2.8-1.3s2.2,0.2,3.1,1S729.6,253.6,729.6,254.9z"/>
						<path class="st15 coal" d="M749.3,251.1c0,1.3-1.4,2-2.2,2.8s-1.5,2.1-2.8,2.1c-1.3,0-2.4-0.8-3.3-1.7c-0.8-0.8-1.3-2-1.3-3.3
							s0.3-2.7,1.1-3.5s2.3-1.1,3.5-1.1c1.3,0,2,1,2.8,1.8C747.9,249.1,749.3,249.8,749.3,251.1z"/>
						<path class="st15 coal" d="M762.4,238.9c0,1.3-0.2,2.1-1,2.9s-1.7,1.5-2.9,1.5c-1.3,0-2.1-0.7-2.9-1.5c-0.8-0.8-1.9-1.6-1.9-2.9
							s0.4-2.8,1.2-3.6c0.8-0.8,2.4-0.9,3.6-0.9c1.3,0,2.1,0.8,2.9,1.6C762.2,236.8,762.4,237.7,762.4,238.9z"/>
					</g>
					<path id="nose" class="st16" d="M718.1,211.5c0,0,45,14.4,54.9,22.7s-58.1-5.2-58.1-5.2S707.4,219.1,718.1,211.5z"/>
				</g>
				<g id="clothes">
					<g id="hat">
						<path class="st15" d="M647.1,163.8c0,0-13.3-68.1,45.1-83.8c0,0,62.3-15,75.4,61.7C767.6,141.7,712.4,168,647.1,163.8z"/>
						<path class="st3" d="M637.4,179.5c0,0,72.5-4,143.5-27.5c0,0-0.5-11-7.5-14c0,0-58.7,19.3-133.4,25.3
							C640,163.3,635,170.7,637.4,179.5z"/>
						<path class="st3" d="M705.3,76.1c0,0.5-0.1,1.1-0.2,1.6c-0.1,0.5-1.8,0.7-1.9,1.2c-0.1,0.5,0.4,1.2,0.2,1.6
							c-0.2,0.5-1.2,0.4-1.4,0.9c-0.3,0.4-0.5,0.7-0.9,1.1c-0.3,0.4,0.3,1.7-0.1,2.1c-0.4,0.3-1.5-0.3-1.9,0c-0.4,0.3-0.1,2-0.6,2.2
							c-0.5,0.2-1.1,0.4-1.6,0.6c-0.5,0.1-1.2-0.1-1.7,0c-0.5,0.1-1.1,0.3-1.6,0.3c-0.5,0-1-1.3-1.5-1.4c-0.5-0.1-0.9-0.4-1.4-0.5
							c-0.5-0.1-1.5,1.2-2,1c-0.5-0.2-0.3-1.6-0.7-1.9c-0.4-0.3-1-0.3-1.4-0.7c-0.4-0.3-0.9-0.5-1.2-0.9c-0.3-0.4-1.1-0.5-1.4-0.9
							c-0.3-0.4-1-0.8-1.2-1.2c-0.2-0.5,0.8-1.4,0.6-1.9c-0.1-0.5,0-1,0-1.5c-0.1-0.5,0.4-0.9,0.4-1.5c0-0.5-1.1-1.1-1-1.6
							c0.1-0.5,0.9-0.8,1.1-1.3c0.1-0.5-0.9-1.5-0.7-1.9c0.2-0.5,1.6-0.3,1.9-0.8c0.3-0.4,0.2-1,0.6-1.4c0.3-0.4-0.1-1.6,0.3-2
							c0.4-0.3,2,1,2.5,0.7c0.4-0.3-0.1-2.3,0.4-2.5c0.5-0.2,1.3,0.3,1.8,0.1c0.5-0.1,0.9-0.9,1.5-1c0.5-0.1,1.1,0.1,1.7,0.1
							s1,1,1.5,1.1c0.5,0.1,1.3-0.8,1.8-0.7c0.5,0.1,0.8,1,1.3,1.2c0.5,0.2,1.1,0.2,1.5,0.5c0.4,0.3-0.1,1.7,0.3,2
							c0.4,0.3,1.9-0.5,2.2-0.1c0.3,0.4-0.2,1.4,0.1,1.9c0.3,0.4,0.7,0.7,0.9,1.2c0.2,0.5,1.5,0.6,1.6,1.1c0.1,0.5,0,1.2,0.1,1.7
							C705.1,75,705.3,75.6,705.3,76.1z"/>
					</g>
					<g id="scarf">
						<path class="st15" d="M655.4,268C655.4,268,655.4,268,655.4,268c31.2,16.6,71.6,17.2,105.2,10.3c3.5-0.7,7.1-1.5,10.6-2.5
							c2.9-0.8,6.9-3.6,10-2.8c0.6,0.2,1.2,0.5,1.8,0.9c3.6,2.3,6.6,5.7,8.5,9.5c1.7,3.4,2.7,8.2,2.6,12c0,0.5,0,1-0.3,1.4
							c-0.3,0.5-1,0.7-1.6,0.8c-25,6.7-50.6,9.5-76.5,8.9c-12.2-0.3-24.4-1.6-36.3-4c-6.1-1.2-12.1-2.8-18-4.7
							c-5.1-1.6-12.3-3.3-16.6-6.5c-2.9-2.1-2.3-5.8-1.7-9C644.3,275.7,649.6,271.3,655.4,268z"/>
						<path class="st15" d="M756,304.4l28.2-5.1c0,0-0.8,27,5.7,40.7c4.6,9.7,1.4,20.4,1.4,20.4s-13,4.4-25.7,0c0,0-0.5-20.3-2.2-26.4
							C762.4,330.5,754.1,312.8,756,304.4z"/>
						<path id="llc-hashtag" class="st3" d="M776.7,340l-2.8-1.9l1.9-2.8l2.8,1.9L776.7,340z M780.7,336.8l2-2.9
							c0.2-0.3,0.1-0.7-0.3-0.9c-0.3-0.2-0.7-0.3-1,0.1l-2,2.9l-2.8-1.9l2-2.9c0.2-0.3,0.1-0.7-0.3-0.9c-0.3-0.2-0.7-0.3-1,0.1l-2,2.9
							l-2.9-2c-0.3-0.2-0.8-0.1-1,0.2c-0.2,0.3-0.2,0.8,0.1,1l2.9,2l-1.9,2.8l-2.9-2c-0.3-0.2-0.8-0.1-1,0.2c-0.2,0.3-0.2,0.8,0.1,1
							l2.9,2l-2,2.9c-0.2,0.3-0.1,0.8,0.2,1c0.3,0.2,0.8,0.2,1-0.1l2-2.9l2.8,1.9l-2,2.9c-0.2,0.3-0.1,0.8,0.2,1c0.3,0.2,0.8,0.2,1-0.1
							l2-2.9l2.9,2c0.3,0.2,0.7,0.1,0.9-0.3c0.2-0.3,0.3-0.7-0.1-1l-2.9-2l1.9-2.8l2.9,2c0.3,0.2,0.7,0.1,0.9-0.3
							c0.2-0.3,0.3-0.7-0.1-1L780.7,336.8z"/>
						<path class="st3" d="M765.6,360.4c0,0-1,12.6,0,14.8c1,2.2,1.5-4.3,2.8-6c1.3-1.7-1.2,10.3,0,7.2c1.2-3.2,2.7-2,2.7-6.2
							c0-4.2,1.2,6.2,1.8,3.3s1.2-6.8,1.2-6.8s-0.7,6.8,1.3,9.5c2,2.7-0.5-8.8,0.8-9.7c1.3-0.8-0.2,7.8,1.3,7.5s1.3-7,1.3-7
							s0.8,2.5,1.2,7.2c0.3,4.7,0.7-3.9,0.8-5.5c0.2-1.7,1.4-2,2,5.7c0.6,7.7,0.5-6.7,1.6-8.5c1.2-1.8,0.7,10,2,6.3c0,0,0.9-5.5,1-8.2
							c0.1-2.6,0.8,10,2.3,11.2c1.5,1.2-1.6-8.8,1.4-14.8C791.3,360.4,773.8,363.3,765.6,360.4z"/>
					</g>
				</g>
			</g>
			<g id="snowsplash">
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -426.4113 179.6329)" class="snow-splash" cx="51.1" cy="717.3" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -425.5047 193.2627)" class="snow-splash" cx="71.7" cy="722.8" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -415.7405 172.6024)" class="snow-splash" cx="46.1" cy="698.1" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -409.6323 181.7492)" class="snow-splash" cx="62.7" cy="693.7" rx="2.1" ry="2.1"/>
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -419.2147 159.4192)" class="snow-splash" cx="25" cy="696.6" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -403.9859 161.6285)" class="snow-splash" cx="35.9" cy="675.3" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.793 -0.6092 0.6092 0.793 -388.3707 147.5211)" class="snow-splash" cx="22.9" cy="645.3" rx="2.1" ry="2.1"/>
				
					<ellipse transform="matrix(0.8011 -0.5985 0.5985 0.8011 -382.3713 247.5511)" class="snow-splash" cx="181.3" cy="699.1" rx="1.8" ry="1.8"/>
				
					<ellipse transform="matrix(0.8011 -0.5985 0.5985 0.8011 -394.0032 248.0901)" class="snow-splash" cx="176.3" cy="716.9" rx="1.8" ry="1.8"/>
				
					<ellipse transform="matrix(0.8011 -0.5985 0.5985 0.8011 -376.5623 256.7662)" class="snow-splash" cx="198.1" cy="695" rx="1.8" ry="1.8"/>
				
					<ellipse transform="matrix(0.8011 -0.5985 0.5985 0.8011 -384.4626 261.8152)" class="snow-splash" cx="201.7" cy="709.4" rx="1.8" ry="1.8"/>
				
					<ellipse transform="matrix(0.9264 -0.3766 0.3766 0.9264 -240.1182 124.9835)" class="snow-splash" cx="199.6" cy="676.6" rx="1.8" ry="1.8"/>
				<ellipse transform="matrix(0.9264 -0.3766 0.3766 0.9264 -232.978 132.243)" class="snow-splash" cx="221.7" cy="662" rx="1.8" ry="1.8"/>
				
					<ellipse transform="matrix(0.8011 -0.5985 0.5985 0.8011 -367.411 266.9726)" class="snow-splash" cx="218" cy="686.3" rx="1.8" ry="1.8"/>
			</g>
			<text transform="matrix(1 0 0 1 178.3382 519.5996)" class="st3 st4 st5 llc-text">from Ladies Learning Code</text>

		</svg>
		<!-- <h2 class="llc-text">from Ladies Learning Code</h2> -->
		<p class="llc-text2">
		Made with love and code 
		by our Creative Director, 
		Nat Cooper
		</p>
	</section>
            
          
!
            
              body {
	// margin: 0 10%;
	font-family: Montserrat;
	font-size: 14px;
	letter-spacing: 0.25px;
}

h2 {
	text-transform: uppercase;
	font-family: Quicksand;
	position: absolute;
}
p {
	position: absolute;
	// text-align: center;
	width: 100%;
	font-size: 10px;
	color: #4C6F89;
	opacity: 0.3;
	text-transform: uppercase;
	bottom: -3px;
	left: 0;
	// transform: translateX(-50%);
	font-size: 11px;
	// color: 
}
svg {
	max-height: 95vh;
	height: 100%;
}
text {
	text-transform: uppercase;

}
section {
	position: relative;
	text-align: center;
	max-height: 95vh;
}

            
          
!
            
              	$('body').flurry({
	    height: 700,
	    speed: 9000,
	    wind: 100,
	    variance: 80,
	    container: $('section')
	});

	// bottom snowball
	var $bottomWhole = $('#bottom');
	var $bottom = $('#bottomshape');
	var $bottomSnow = $('#bottomtexture');
	var $bottomShadow = $('#shadow');

	// snow splash 
	var $snowSplash = $('#snowsplash');
	var $snowSplashE = $('#snowsplash ellipse');


	TweenLite.set($bottom, {
		scale: 0.65,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -800,
		y: -40
	});
	TweenLite.set($bottomShadow, {
		scale: 0.65,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -800,
		y: 0
	});
	TweenLite.set($snowSplashE, {
		opacity: 0,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: 0,
		y: 0,
		scale: 1.5
	});

	// body snowball
	var $body = $('#body');
	var $bodyShadow = $('#shadowB');

	TweenLite.set($body, {
		scale: 0.65,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -800,
		y: 100
	});
	
	TweenLite.set($bodyShadow, {
		scale: 0.45,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -800,
		y: 100
	});

	// head snowball
	var $head = $('#head');
	var $headShadow = $('#shadowC');

	TweenLite.set($head, {
		scale: 0.65,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -780,
		y: -100
	});
	
	TweenLite.set($headShadow, {
		scale: 0.45,
		transformOrigin: "50% 50%",
		// rotation:0.01,
		x: -800,
		y: 100
	});

	// arms
	var $rightArm 		= $('#right-arm');
	var $rightShoulder 	= $('#right-shoulder');
	var $rightFore 		= $('#fore_1_');
	var $leftArm 		= $('#left-arm');
	var $leftShoulder 	= $('#left-shoulder');
	var $leftFore 		= $('#fore');

	TweenLite.set($rightArm, {
		scale: 0,
		opacity: 0,
		transformOrigin: "10% 0%",
		// rotation:0.01,
		x: -440,
		y: 280,
		rotation: -60,
	});
	
	TweenLite.set($leftArm, {
		scale: 0,
		opacity: 0,
		transformOrigin: "10% 0%",
		// rotation:0.01,
		x: -340,
		y: 220,
		rotation: 40,
	});
	TweenLite.set($rightShoulder, {
		transformOrigin: "0% 100%"
	});
	
	TweenLite.set($rightFore, {
		transformOrigin: "0% 0%"
	});
	
	//face 
	var $face 			= $('#face');
	var $rightEye 		= $('#eyes .right');
	var $leftEye	 	= $('#eyes .left');
	var $nose 			= $('#nose');
	var $coal			= $('.coal');

	TweenLite.set($face, {
		transformOrigin: "50% 50%",
		y: -10
	});

	TweenLite.set($rightEye, {
		transformOrigin: "50% 50%",
		scale: 0
	});
	
	TweenLite.set($leftEye, {
		transformOrigin: "50% 50%",
		scale: 0
	});
	TweenLite.set($nose, {
		transformOrigin: "0% 50%",
		scale: 0
	});
	TweenLite.set($coal, {
		transformOrigin: "50% 50%",
		scale: 0
	});

	//clothes 
	var $clothes 		= $('#clothes');
	var $hat	 		= $('#hat');
	var $scarf 		 	= $('#scarf');
	// var $nose 			= $('#nose');
	// var $coal			= $('.coal');

	TweenLite.set($clothes, {
		transformOrigin: "50% 50%",
		y: -18
	});
	TweenLite.set($hat, {
		transformOrigin: "50% 50%",
		y: -180,
		rotation: 50,
		x: -50

	});
	TweenLite.set($scarf, {
		transformOrigin: "50% 50%",
		y: -395,
		rotation: 50,
		x: -150

	});

	//words
	var $first 			= $('#first');
	var $second	 		= $('#second');
	var $third 		 	= $('#third');
	var $fourth 		= $('#fourth');
	var $fifth 		 	= $('#fifth');
	var $sixth 		 	= $('#sixth');

	var $llcText 		= $('.llc-text');
	var $llcText2 		= $('.llc-text2');

	TweenLite.set($llcText, {
		opacity: 0
	});

	TweenLite.set($first, {
		drawSVG: "0%"
	});
	TweenLite.set($second, {
		drawSVG: "0%"
	});
	TweenLite.set($third, {
		drawSVG: "0%"
	});
	TweenLite.set($fourth, {
		drawSVG: "0%"
	});
	TweenLite.set($fifth, {
		drawSVG: "0%"
	});
	TweenLite.set($sixth, {
		drawSVG: "0%"
	});


	$(window).on("load", function() {

		// setup 1st master timeline
		var bottomTL = new TimelineMax({
			// paused: true,
			// repeat: -1
		});

		function snowballHit() {
			TweenLite.set($snowSplashE, {
				opacity: 1,
				transformOrigin: "50% 50%",
				// rotation:0.01,
				y: 20
			});

			var tl = new TimelineMax();

			tl
				.to($snowSplashE, 0.6, {
					y: 0,
					opacity: 0
				})

			return tl;
		}
	  
		function bottomBounce() {

			var tl = new TimelineMax();

			tl
				.to($bottom, 0.4, {scale: 0.7, rotation: "+=180", x: -640, y: 60, ease: Circ.easeIn }, "bounceBottom")
				.to($bottomShadow, 0.4, {scale: 0.7, x: -640, y: 0, opacity: 0.4, ease: Circ.easeIn}, "bounceBottom")
				
				.to($snowSplash, 0, { x: -10 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($bottom, 0.15, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.8,
				  scaleY: 0.6,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBottom2-=0.06")
				.to($bottomShadow, 0.15, {scale: 0.5, x: -640, y: 0, opacity: 0.7}, "bounceBottom2")

				.to($bottom, 0.2, {scale: 0.75, rotation: "+=180", x: -480, y: -30, ease: Circ.easeOut }, "bounceBottom3")
				.to($bottomShadow, 0.2, {scale: 0.7, x: -480, y: 0, opacity: 0.3, ease: Circ.easeOut}, "bounceBottom3")
				.to($bottom, 0.25, {scale: 0.8, rotation: "+=180", x: -320, y: 50, ease: Circ.easeIn }, "bounceBottom4")
				.to($bottomShadow, 0.25, {scale: 0.7, x: -320, y: 0, opacity: 0.3, ease: Circ.easeIn}, "bounceBottom4")

				.to($snowSplash, 0, { x: 230, scaleX: 1.6 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($bottom, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.9,
				  scaleY: 0.7,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBottom5-=0.06")
				.to($bottomShadow, 0.15, {scale: 0.8, x: -320, y: 0, opacity: 0.7}, "bounceBottom5")

				.to($bottom, 0.3, {scale: 0.85,rotation: "+=180", x: -160, y: -10, ease: Circ.easeOut }, "bounceBottom6")
				.to($bottomShadow, 0.3, {scale: 0.8, x: -160, y: 0, opacity: 0.4, ease: Circ.easeOut}, "bounceBottom6")
				.to($bottom, 0.3, {scale: 0.9,rotation: "+=180", x: 0, y: 20, ease: Circ.easeIn }, "bounceBottom7")
				.to($bottomShadow, 0.3, {scale: 0.8, x: 0, y: 0, opacity: 0.4, ease: Circ.easeIn}, "bounceBottom7")

				.to($snowSplash, 0, { x: 510, scaleX: 1.9  })				
				.to($snowSplashE, 0, { scale: 1 })
				.to($bottom, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 1.08,
				  scaleY: 0.9,
				  y: 10,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBottom8-=0.06")
				.to($bottomShadow, 0.15, {scale: 1, x: 0, y: 0, opacity: 0.7}, "bounceBottom8")

				.to($bottom, 0.3, {scale: 1, rotation: "+=16", x: 20, y: 5, ease: Circ.easeIn }, "bounceBottom9")
				.to($bottomShadow, 0.3, {scale: 1, x: 20, y: 0, opacity: 0.6, ease: Circ.easeIn}, "bounceBottom9")
				.to($bottom, 0.4, {scale: 1, rotation: "-=16", x: 0, y: 0, ease: Back.easeOut }, "bounceBottom10")
				.to($bottomShadow, 0.4, {scale: 1, x: 0, y: 0, opacity: 0.6, ease: Back.easeOut}, "bounceBottom10")
				
			return tl;
		}

		function bodyBounce() {

			var tl = new TimelineMax();

			tl
				.to($body, 0.4, {scale: 0.7, rotation: "+=180", x: -640, y: 300, ease: Circ.easeIn }, "bounceBody")
				.to($bodyShadow, 0.4, {scale: 0.6, x: -640, y: 0, opacity: 0.4, ease: Circ.easeIn}, "bounceBody")
				
				.to($snowSplash, 0, { x: -190 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($body, 0.15, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.8,
				  scaleY: 0.6,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBody2-=0.06")
				.to($bodyShadow, 0.15, {scale: 0.4, x: -640, y: 10, opacity: 0.7}, "bounceBody2")

				.to($body, 0.2, {scale: 0.75, rotation: "+=180", x: -480, y: 200, ease: Circ.easeOut }, "bounceBody3")
				.to($bodyShadow, 0.2, {scale: 0.6, x: -480, y: 10, opacity: 0.3, ease: Circ.easeOut}, "bounceBody3")
				.to($body, 0.25, {scale: 0.8, rotation: "+=180", x: -320, y: 300, ease: Circ.easeIn }, "bounceBody4")
				.to($bodyShadow, 0.25, {scale: 0.6, x: -320, y: 10, opacity: 0.3, ease: Circ.easeIn}, "bounceBody4")

				.to($snowSplash, 0, { x: 230, scaleX: 1.6 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($body, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.9,
				  scaleY: 0.7,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBody5-=0.06")
				.to($bodyShadow, 0.15, {scale: 0.7, x: -320, y: 10, opacity: 0.7}, "bounceBody5")

				.to($body, 0.3, {scale: 0.85,rotation: "+=180", x: -200, y: 200, ease: Circ.easeOut }, "bounceBody6")
				.to($bodyShadow, 0.3, {scale: 0.7, x: -160, y: 10, opacity: 0.4, ease: Circ.easeOut}, "bounceBody6")
				// .to($body, 0.3, {scale: 0.9,rotation: "+=180", x: 0, y: 200, ease: Circ.easeIn }, "bounceBody7")
				// .to($bodyShadow, 0.3, {scale: 0.8, x: 0, y: 0, opacity: 0.4, ease: Circ.easeIn}, "bounceBody7")
				.to($body, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.8,
				  scaleY: 1.02,
				  x: -190,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBody7-=0.06")
				.to($bodyShadow, 0.3, {scaleX: 0.5, x: -160, y: 10, opacity: 0.4, ease: Circ.easeOut}, "bounceBody7")
				.to($bottom, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.98,
				  scaleY: 1.02,
				  x: 10,
				  rotation: "+=5",
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceBody8-=0.06")
				.to($body, 0.3, {scale: 0.85,rotation: "-=60", x: -300, y: 280, ease: Circ.easeOut }, "bounceBody9")
				.to($bodyShadow, 0.3, {scale: 0.7, x: -300, y: 10, opacity: 0.4, ease: Circ.easeOut}, "bounceBody9")
				.to($body, 0.3, {scale: 0.9,rotation: "-=180", x: -400, y: 280, ease: Circ.easeOut }, "bounceBody10")
				.to($bodyShadow, 0.3, {scale: 0.7, x: -400, y: 10, opacity: 0.4, ease: Circ.easeOut}, "bounceBody10")
				
			return tl;
		}
		function bodyShake() {
		
			var tlShake = new TimelineMax({repeat:6});

				tlShake
					.to($body, 0.15, {rotation: "-=10", ease:Linear.easeNone }, "shakeBody")
					.to($body, 0.15, {rotation: "+=10", ease:Linear.easeNone }, "shakeBody2")
				
		 	return tlShake;

		}
		function rightArm() {
			var tl = new TimelineMax();

			// attr:{x1:1200, y1:320, x2:938, y2:256},

			tl 
				.to($rightArm, 1, {scale: 1, rotation: "+=10", opacity: 1, ease:Elastic.easeOut }, "rightArmPop")
				.to($rightFore, 0.75, {transformOrigin: "0% 10%", scaleY: 1.7, rotation: "+=25", x: 30, y: -128, ease: Circ.easeOut }, "rightArmPop2")
				.to($body, 0.75, { x: -440, y: 260, ease:Linear.easeNone }, "rightArmPop2")
				.to($leftArm, 0.75, {x: -400, rotation: "+=5", ease:Linear.easeNone }, "rightArmPop2")
				.to($bodyShadow, 0.75, {scale: 0.75, x: -440, y: 10, opacity: 0.35, ease:Linear.easeNone}, "rightArmPop2")
				.to($rightShoulder, 0.75, {transformOrigin: "100% 0%", x: -20, y: -130, rotation: "-=48", attr:{x2:880, y2:418}, ease: Circ.easeOut }, "rightArmPop2")
				.to($rightFore, 0.5, {transformOrigin: "0% 10%", rotation: "+=5", y: -98, ease: Circ.easeOut }, "rightArmPop3")
				.to($rightShoulder, 0.75, {transformOrigin: "100% 100%", rotation: "+=180", x: -18, y: -90, attr:{x1:700, y1:210}, ease: Circ.easeOut }, "rightArmPop3")
				.to($body, 0.75, {transformOrigin: "-85% -100%", x: -340, y: 380, rotation: "+=90", ease: Circ.easeOut }, "rightArmPop3")
				.to($leftArm, 0.75, {transformOrigin: "280% -170%", x: -330, y: 340, rotation: "+=120", ease: Circ.easeOut }, "rightArmPop3")
				.to($bodyShadow, 0.75, {scale: 0.45, x: 20, y: -300, opacity: 0.5,attr:{ry:33}, ease: Circ.easeOut}, "rightArmPop3")
				.to($body, 0.01, {transformOrigin: "50% 50%",rotation: 0}, "rightArmPop4")

				
			return tl;
		}
		function leftArm() {
			var tl = new TimelineMax();

			tl 
				.to($leftArm, 1, {scale: 1, rotation: "+=10", opacity: 1, ease:Elastic.easeOut }, "leftArmPop")
			return tl;
		}
		function bodyDrop() {
			var tl = new TimelineMax();

			tl 
				// .to($rightShoulder, 0.25, {transformOrigin: "0% 0%", rotation: "+=10",ease:Linear.easeNone}, "bodyDrop")
				.to($rightFore, 0.25, {scale: 1, transformOrigin: "0% 10%", rotation: "-=16", y: -145, x: 160, ease:Linear.easeNone}, "bodyDrop")
				.to($rightShoulder, 0.25, {transformOrigin: "0% 0%",rotation: "+=10", attr:{x2:780, y2:348}, ease:Linear.easeNone}, "bodyDrop")
				.to($body, 0.75, {transformOrigin: "50% 50%", y: 320, ease: Circ.easeOut}, "bodyDrop-=0.025")
				.to($bodyShadow, 0.45, {scale: 0.55, x: 20, y: -300, opacity: .3, ease: Circ.easeOut}, "bodyDrop+=0.025")
				// .to($rightArm, 0.75, {y: "+=10", ease: Circ.easeOut}, "bodyDrop-=0.5")
				.to($body, 0.45, {transformOrigin: "50% 50%", x: -330, y: 500, ease: Bounce.easeOut}, "bodyDrop+=0.05")
				.to($bodyShadow, 0.45, {scale: 0, x: 20, y: -300, opacity: .6, ease: Bounce.easeOut}, "bodyDrop+=0.05")
				.to($rightFore, 0.45, {x: 140, y: -130, ease: Bounce.easeOut}, "bodyDrop+=0.05")
				.to($rightShoulder, 0.45, {x: -40, y: -70, ease: Bounce.easeOut}, "bodyDrop+=0.05")
				// .to($leftArm, 0.001, {transformOrigin: "0% 0%", rotation: 0,}, "bodyDrop")
				.to($leftArm, 0.45, {x: "+=20", y: "+=100", ease: Bounce.easeOut}, "bodyDrop+=0.05")
				// .to($body, 0.02, {scaleX: 1.1, scaleY: 0.6, ease: Power1.easeInOut}, "bodyDrop+=0.095")

			return tl;
		}
		function bodyGrow() {

			var tl = new TimelineMax();

			tl
				.to($body, 2, {scaleX: 1, scaleY: 1, y: 510, ease:Linear.easeNone}, "bodyGrow")
				.to($leftArm, 2, {transformOrigin: "100% 0%", rotation: "+=60", ease: Linear.easeNone}, "bodyGrow")
				
				
				
				
			return tl;
		}
		function headBounce() {

			var tl = new TimelineMax();

			tl
				.to($head, 0.4, {scale: 0.7, rotation: "+=180", x: -600, y: 510, ease: Circ.easeIn }, "bounceHead")
				.to($headShadow, 0.4, {scale: 0.35, x: -590, y: 30, opacity: 0.4, ease: Circ.easeIn}, "bounceHead")

				.to($snowSplash, 0, { opacity: 1, x: -50 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($head, 0.15, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.8,
				  scaleY: 0.6,
				  y: 524,
				  ease: Power1.easeInOut
				  //ease: Bounce.easeOut
				}, "bounceHead2-=0.06")
				.to($headShadow, 0.15, {scale: 0.4, x: -590, y: 30, opacity: 0.7}, "bounceHead2")

				.to($head, 0.2, {scale: 0.75, rotation: "+=180", x: -480, y: 200, ease: Circ.easeOut }, "bounceHead3")
				.to($headShadow, 0.2, {scale: 0.6, x: -480, y: 10, opacity: 0.3, ease: Circ.easeOut}, "bounceHead3")
				.to($head, 0.25, {scale: 0.85, rotation: "+=180", x: -320, y: 480, ease: Circ.easeIn }, "bounceHead4")
				.to($headShadow, 0.25, {scale: 0.6, x: -320, y: 10, opacity: 0.3, ease: Circ.easeIn}, "bounceHead4")

				.to($snowSplash, 0, { x: 230, scaleX: 1.6 })
				.to($snowSplashE, 0, { scale: 1 })
				.to($head, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.9,
				  scaleY: 0.7,
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceHead5-=0.06")
				.to($headShadow, 0.15, {scale: 0.5, x: -310, y: 0, opacity: 0.7}, "bounceHead5")

				.to($head, 0.3, {scale: 0.85,rotation: "+=180", x: -170, y: 300, ease: Circ.easeOut }, "bounceHead6")
				.to($headShadow, 0.3, {scale: 0.5, x: -160, y: 10, opacity: 0.3, ease: Circ.easeOut}, "bounceHead6")
				.to($head, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.7,
				  scaleY: 1,
				  // x: 10,
				  // rotation: "+=5",
				  ease: Power1.easeInOut,
				  onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceHead8-=0.06")

				.to($headShadow, 0.3, {scaleX: 0.5, x: -160, y: 10, opacity: 0.4, ease: Circ.easeOut}, "bounceHead7")
				.to($head, 0.1, {
				  // transformOrigin: "50% 100%",
				  scaleX: 0.7,
				  scaleY: 1,
				  // x: 10,
				  // rotation: "+=5",
				  ease: Power1.easeInOut,
				  // onComplete: snowballHit
				  //ease: Bounce.easeOut
				}, "bounceHead8-=0.06")

				.to($head, 0.3, {scale: 0.95,rotation: "-=60", x: -300, y: 480, ease: Circ.easeOut }, "bounceHead9")
				.to($headShadow, 0.3, {scale: 0.7, x: -300, y: 20, opacity: 0.4, ease: Circ.easeOut}, "bounceHead9")

				.to($head, 0.3, {scale: 1,rotation: "-=180", x: -400, y: 480, ease: Circ.easeOut }, "bounceHead10")
				.to($headShadow, 0.3, {scale: 0.7, x: -400, y: 20, opacity: 0.4, ease: Circ.easeOut}, "bounceHead10")

				
				
			return tl;
		}

		function pickUpHead(){
			var tl = new TimelineMax();

			tl
				.to($rightShoulder, 0.75, {attr:{x2:880, y2:418}, ease: Circ.easeOut }, "pickUpHead2")
				.to($rightFore, 0.75, {transformOrigin: "0% 10%", rotation: "+=45", y: -160, x: 30, ease: Circ.easeOut }, "pickUpHead2")
				.to($head, 0.75, {transformOrigin: "-95% -150%", x: -340, y: 380, rotation: "+=90", ease: Circ.easeOut }, "pickUpHead3")
				.to($headShadow, 0.25, {scale: 0, opacity: .6}, "pickUpHead3+=0.05")
				.to($leftArm, 0.75, {rotation: "+=20", y: "-=50", x: "-=10",  ease: Circ.easeOut}, "pickUpHead3")
				.to($leftFore, 0.75, {transformOrigin: "0% 10%", rotation: "+=160", y: "-=28", x: "-=5",  ease: Circ.easeOut}, "pickUpHead3")
				.to($rightShoulder, 0.75, {
					transformOrigin: "0% 0%",
					x: -18, y: -90,
					attr:{ x1:700, y1:210, y2: 275, x2: 575 }, 
					ease:Circ.easeOut
				}, "pickUpHead3")
				.to($rightFore, 0.75, {
					transformOrigin: "0% 0%",
					rotation: "280",
					x: 400, y: -175,
					ease:Circ.easeOut
				}, "pickUpHead3")
				.to($head, 0.5, {x: -350, y: 420, ease: Bounce.easeOut }, "pickUpHead5")

			return tl;
		}

		function facePop(){
			var tl = new TimelineMax();

			tl
				.to($rightEye, 0.25, {scale: 1, ease: Bounce.easeOut }, "facePop")
				.to($rightArm, 0.25, {transformOrigin: "0% 100%", x: "+=60", rotation: "-=120",ease: Circ.easeOut}, "facePop")
				.to($rightFore, 0.2, {transformOrigin: "0% 100%", y: -352, x: "-=246", rotation: "-=160",ease:  Circ.easeOut}, "facePop+=0.15") 
				.to($leftEye, 0.25, {scale: 1, ease: Bounce.easeOut }, "facePop+=0.15")
				.to($nose, 0.25, {scale: 1, ease: Bounce.easeOut, onComplete: coalPop }, "facePop+=0.25")
				.to($hat, 0.5, {transformOrigin: "0% 150%", y:0, x: 200, rotation:-5, ease: Circ.easeOut}, "facepop2")
				.to($hat, 0.5, {transformOrigin: "0% 150%", y:10, x: -50, rotation:25, ease: Circ.easeOut}, "facepop3")
				.to($hat, 0.5, {transformOrigin: "0% 150%", y:100, x: 60, rotation:0, ease: Circ.easeOut}, "facepop4")
				.to($hat, 0.25, {transformOrigin: "0% 150%", y:102,  x: 55, scaleY:0.95, scaleX: 1.05, ease: Circ.easeOut}, "facepop4+=0.25")
				.to($hat, 0.25, {transformOrigin: "0% 150%", scaleY:1, scaleX: 1, y:100, x: 60, rotation:0, ease: Circ.easeOut}, "facepop5")

				.to($scarf, 0.5, {transformOrigin: "0% 150%", y:-60, x: 180, rotation:-20, ease: Circ.easeOut}, "facepop2+=0.5")
				.to($scarf, 0.5, {transformOrigin: "0% 150%", y:10, x: -50, rotation:25, ease: Circ.easeOut}, "facepop3+=0.5")
				.to($scarf, 0.5, {transformOrigin: "0% 150%", y:100, x: 60, rotation:0, ease: Circ.easeOut}, "facepop4+=0.5")

				// .to($hat, 0.5, { rotation:0, y:-60, x: 180, ease: Circ.easeOut}, "facepop2-=1.5")
				// .to($hat, 1.5, {y:-90, x: 10, rotation:20, ease: Back.easeOut.config(1.7)}, "facepop2")
				



			return tl;
		}

		function coalPop() {
			var tl = new TimelineMax();
			$coal.each(function(i, el) {
				tl.to($(el), 0.2, { scale: 1 })				
			})
		}

		function wordsDraw() {
			var tl = new TimelineMax();
			
			// var sT = new SplitText($llcText, {type:"chars"});
			var sT2 = new SplitText($llcText2, {type:"words"});
			// var sT2 = new SplitText($t2, {type:"chars, words"});

			tl
				.to($first, 7, {drawSVG:"100%", autoAlpha:1, ease: Power2.easeOut},"wordsDraw")
				.to($second, 0.25, {drawSVG:"100%", autoAlpha:1, ease: Power4.easeOut}, "wordsDraw+=4.5")
				.to($third, 3.8, {drawSVG:"100%", autoAlpha:1, ease: Power4.easeOut}, "wordsDraw+=5.6")
				.to($fourth, 7, {drawSVG:"100%", autoAlpha:1, ease: Power4.easeOut}, "wordsDraw+=7.2")
				.to($fifth, 2.5, {drawSVG:"100%", autoAlpha:1, ease: Power4.easeOut}, "wordsDraw+=12")
				.to($sixth, 2.5, {drawSVG:"100%", autoAlpha:1, ease: Power4.easeOut}, "wordsDraw+=12.8")
				.to($llcText,2, {opacity: 1,ease: Power4.easeIn}, "wordsDraw+=12.8")
				
				.staggerFrom(sT2.words, 1, {opacity:0, ease:Circ.easeOut}, 0.15, "wordsDraw3")
				.staggerTo(sT2.words, 0.8, { opacity:1, ease:Power4.easeIn}, 0.1, "wordsDraw3")
				


			return tl;
		}


	    window.requestAnimationFrame(function() {

	      //////////////
	      /* masterTL */

	      bottomTL
	        .add(bottomBounce())
	        .add(bodyBounce())
	        .add(bodyShake())
	        .add(rightArm(), "arms") //and body lift
	        .add(leftArm(), "arms")
	        .add(bodyDrop())
	        .add(bodyGrow(), "growHead")
	        .add(headBounce(), "growHead-=0.5")
	        .add(pickUpHead())
	        .add(facePop())
	        .add(wordsDraw())
	      


	        // .progress(1).progress(0)
	        // .seek(16)
	        // .pause();
	        .timeScale(1)
	        .play();

	    });

	  });
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console