<a href="https://codepen.io/collection/ArLPGy/" target="_blank">see whole collection</a>
<h1>#31<span>creepy</span>SVGs</h1>		
	<section class="svg-wrap">
		<svg class="witch-body-etc" x="0px" y="0px" viewBox="0 0 529 591" style="enable-background:new 0 0 529 591;" xml:space="preserve">
			<style type="text/css">
				.st0{fill:#263238;}
				.st1{fill:#2D3079;}
				.st2{fill:#14499E;}
				.st3{fill:#A5D5A7;}
				.st4{fill:#F5F5F5;stroke:#2D3079;stroke-width:3;stroke-miterlimit:10;}
				.st5{fill:#F5F5F5;}
				.st6{fill:#4DAF4E;}
				.st7{fill:#66BB6A;}
				.st8{fill:#692C90;}
				.st9{fill:#4B2D87;}
				.st10{fill:#FFF278;}
				.st11{fill:#04897B;}
				.st12{fill:#25A69A;}
				.st13{fill:#009688;}
				.st14{fill:#4CB6AC;}
				.st15{fill:#434343;}
			</style>
			<g id="witch">
				<path id="body_13_" class="st0" d="M375.8,374.7c-13.3,3.4-37.3-33.8-37.3-33.8L267,323.5v-0.4l-0.8,0.2l-0.8-0.2v0.4l-71.5,17.4
					c0,0-24,37.2-37.3,33.8c-13.3-3.4-102,58.4-94.3,86c7.7,27.7,11.9,46.9,11.9,46.9h191.2h1.6h191.2c0,0,4.2-19.2,11.9-46.9
					C477.8,433.1,389.1,371.3,375.8,374.7z"/>
				<path class="st1" d="M100.5,325.4"/>
				<path id="left-front-hair" class="st2" d="M157.1,225.7c0,0-20.2,21.7-12.5,51.7s8.9,38,2,42.7c0,0,14.3-5.4,14.3-15.1
					c0-9.6,0.1,28.6-10.5,34.1c0,0,18-1.1,19-19.1c0,0-12.2,53.2-14.8,47.4c0,0,17.5,5.2,17.9-8.8c0,0,0.6,19.7-11.6,24.7
					c0,0,4.5,2,10.9-3.3c0,0-8.4,28,0.7,39.3c0,0,3.4-59.9,19.1-67.2c0,0,5.3,1.8-2-17.2c-7.3-19-12.3-12.2-17.1-67.9
					C167.6,211.4,157.1,225.7,157.1,225.7z"/>
				<path id="right-front-hair" class="st2" d="M374.4,224.7c0,0,20.2,21.7,12.5,51.7s-8.9,38-2,42.7c0,0-14.3-5.4-14.3-15.1
					c0-9.6-0.1,28.6,10.5,34.1c0,0-18-1.1-19-19.1c0,0,12.2,53.2,14.8,47.4c0,0-17.5,5.2-17.9-8.8c0,0-0.6,19.7,11.6,24.7
					c0,0-4.5,2-10.9-3.3c0,0,8.4,28-0.7,39.3c0,0-3.4-59.9-19.1-67.2c0,0-5.3,1.8,2-17.2c7.3-19,12.3-12.2,17.1-67.9
					S374.4,224.7,374.4,224.7z"/>
				<path id="skin" class="st3" d="M265.6,224.8c-10.3-3.9-97.2-34.8-93,22.3c1.2,16.9-0.6,33.3,2.6,50.3c2.6,14,7,27.9,14,40.3
					c3.7,6.6,8.2,12.8,13.4,18.3c5.9,6.1,14.5,9.4,19.9,15.3c9.5,10.4-2.3,29.7,14.7,35.4c3.7,1.2,23.8,0.4,28.4-4.7
					c4.6,4.7,23.3,5.9,26.8,5.1c15.8-3.9,10.6-21,14.2-32.9c0.4-1.5,1-3,2.2-4c6.1-5,13.4-7.6,19.3-13.7c5.2-5.4,9.7-11.5,13.5-18
					c7.3-12.6,11.7-26.6,14.4-40.9c3.2-17.1,1.4-33.5,2.6-50.5C362.8,190,275.9,220.9,265.6,224.8z"/>
				<g id="eyes_5_">
					<path class="st4" d="M295.5,259.9c-0.9,2.2-1.4,2.7-1.4,5.2c0,10.6,8.6,19.2,19.2,19.2s19.2-8.6,19.2-19.2c0-2.6-0.5-3-1.4-5.2
						c0,0-8.5-3-17.8-3S295.5,259.9,295.5,259.9z"/>
					<path class="st1" d="M301.6,259.6c-0.6,1.5-0.9,1.8-0.9,3.4c0,7,5.7,12.6,12.6,12.6c7,0,12.6-5.7,12.6-12.6c0-1.7-0.3-2-0.9-3.4
						c0,0-5.6-2-11.7-2S301.6,259.6,301.6,259.6z"/>
					<circle class="st5" cx="308.7" cy="272.3" r="5.1"/>
					<path class="st4" d="M199.9,259.9c-0.9,2.2-1.4,2.7-1.4,5.2c0,10.6,8.6,19.2,19.2,19.2s19.2-8.6,19.2-19.2c0-2.6-0.5-3-1.4-5.2
						c0,0-8.5-3-17.8-3S199.9,259.9,199.9,259.9z"/>
					<path class="st1" d="M206.1,259.6c-0.6,1.5-0.9,1.8-0.9,3.4c0,7,5.7,12.6,12.6,12.6s12.6-5.7,12.6-12.6c0-1.7-0.3-2-0.9-3.4
						c0,0-5.6-2-11.7-2S206.1,259.6,206.1,259.6z"/>
					<circle class="st5" cx="213.1" cy="272.3" r="5.1"/>
				</g>
				<g id="hair">
					<path class="st1" d="M258.6,250.8c0,0-30,6.9-51.3-21.1c0,0-6,7.3,0,16c0,0-10.7,5.3-25.3-16c0,0-10,65.3,7.3,72c0,0-6.4,6-10.2,0
						c0,0-1.8,35.3,6.2,48c0,0-0.1,2-6.4-4c0,0-5.6,59.3,11,68c0,0-16.4,2-18.2-22c0,0-5.1,26.7-16.4,22c0,0,12.7-14,11.3-28
						c-1.3-14-1.3-14-1.3-14s-11.3,16.7-16.7,16.7c0,0,13.3-19.3,16-31.3c0,0-2,6.7-12.7,4.7c0,0,12-27.3,5.3-42.7c0,0-0.7,8.7-8.7,8.7
						c0,0,12.5-26,12.2-52.7c-0.2-26.7-8.4-57.6,0-66.6s48.4-13.8,73.1-12.6c24.7,1.2,9,34.3,9,34.3S243.3,243.9,258.6,250.8z"/>
					<path class="st1" d="M272.6,250.8c0,0,30,6.9,51.3-21.1c0,0,6,7.3,0,16c0,0,10.7,5.3,25.3-16c0,0,10,65.3-7.3,72c0,0,6.4,6,10.2,0
						c0,0,1.8,35.3-6.2,48c0,0,0.1,2,6.4-4c0,0,5.6,59.3-11,68c0,0,16.4,2,18.2-22c0,0,5.1,26.7,16.4,22c0,0-12.7-14-11.3-28
						s1.3-14,1.3-14s11.3,16.7,16.7,16.7c0,0-13.3-19.3-16-31.3c0,0,2,6.7,12.7,4.7c0,0-12-27.3-5.3-42.7c0,0,0.7,8.7,8.7,8.7
						c0,0-12.5-26-12.2-52.7s8.4-57.6,0-66.6c-8.4-9-48.4-13.8-73.1-12.6c-24.7,1.2-9,34.3-9,34.3S288,243.9,272.6,250.8z"/>
				</g>
				<g id="face">
					<path class="st6" d="M283.3,290.1h-19h-19c0,0-9.7,1.8-9.2,13.2c0.5,10.4,13.3,10.3,13.3,10.3h14.9h14.9c0,0,12.8,0,13.3-10.3
						C293,291.9,283.3,290.1,283.3,290.1z"/>
					<path class="st7" d="M273.9,225.7h-9.6h-0.1h-9.6c0,0-26.6,94.6,9.6,109.3v0c0,0,0,0,0,0c0,0,0,0,0,0v0
						C300.5,320.3,273.9,225.7,273.9,225.7z"/>
					<circle class="st7" cx="207.4" cy="339.1" r="5.8"/>
					<circle class="st7" cx="336.5" cy="316.6" r="6.5"/>
					<circle class="st6" cx="270.7" cy="296" r="4.1"/>
					<circle class="st6" cx="285.2" cy="391.5" r="4.1"/>
					<path class="st6" d="M242.2,345.7h44.2c0,0-6.6,13-22.9,13C247.1,358.7,242.2,345.7,242.2,345.7z"/>
					<path class="st7" d="M272.1,371h-13.6c0,0,2-4,7-4C270.5,367,272.1,371,272.1,371z"/>
				</g>
				<g id="hat">
					<path class="st8" d="M165.8,202.6l65.7-154.3c0,0,33.9-64.8,99.9-38.8s17,94.1,17,94.1s0-60.7-39.5-48.1
						c-24.2,20,65,149.3,65,149.3s-45.3,27.2-103.5,27.7S165.8,202.6,165.8,202.6z"/>
					<path class="st9" d="M145.2,248.5c0,0,0.8-36.7,87.7-20.4c0,0-110.9-39.7-126.2-1c-13.2,33.5,6.8,58,54.8,58.7
						C161.4,285.9,140,277.4,145.2,248.5z"/>
					<path class="st8" d="M156.4,285.7c0,0-72.1,6-67.2-53.2c0,0,7.4-42.5,79.5-30.9l67,23.4c0,0-110.1-24.8-119.6,8.8
						C104.9,273.9,149,284.1,156.4,285.7z"/>
					<path class="st9" d="M386.5,249.2c0,0-1.3-36.7-88-19c0,0,110.3-41.5,126.2-3c13.7,33.3-5.9,58.1-53.8,59.6
						C370.9,286.8,392.2,278.1,386.5,249.2z"/>
					<path class="st8" d="M375.9,286.6c0,0,72.2,4.9,66.3-54.3c0,0-8-42.3-80-29.6l-66.6,24.5c0,0,109.7-26.5,119.7,6.9
						C427.2,274,383.3,284.9,375.9,286.6z"/>
					<path class="st9" d="M186.5,153.4c0,0,76.5,35.4,155.1,0.6l22.7,36.6c0,0-91.7,46.1-194.3,2.1L186.5,153.4z"/>
				</g>
				<g id="left-hand">
					<path id="left-palm-light" class="st3" d="M402.1,368.4c11.5,4.7,26.5,0,26.5,0s11.8-12.2,23.6,6.5c11.8,18.7,52.1,50.5,52.1,50.5
						s-23.8,34.3-50.6,33.3s-50.2-25.6-62.7-42S390.7,363.7,402.1,368.4z"/>
					<path id="left-palm" class="st7" d="M400.1,370.4c11.5,4.7,26.5,0,26.5,0s11.8-12.2,23.6,6.5c11.8,18.7,52.1,50.5,52.1,50.5
						s-23.8,34.3-50.6,33.3s-50.2-25.6-62.7-42S388.7,365.7,400.1,370.4z"/>
					<g id="left-initial-fingers">
						<g id="initial-left-fing-a">
							<path class="st3" d="M388.5,414.3h1c6.6,0,12-5.4,12-12v-28.6c0-6.6-5.4-12-12-12h-1c-6.6,0-12,5.4-12,12v28.6
								C376.5,408.9,381.9,414.3,388.5,414.3z"/>
							<path class="st10" d="M377.9,422v-17.1c0-6.2,4.8-11.2,10.7-11.2h0.9c5.9,0,10.7,5,10.7,11.2V422l-6.9-6l1.7,6H377.9z"/>
						</g>
						<g id="initial-left-fing-b">
							<path class="st3" d="M421,389.4l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17l-0.7-0.7
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C415.9,377.2,416.2,384.9,421,389.4z"/>
							<path class="st10" d="M420.4,399.3l-4-5.7l1.2-5.6l-4.6,4.6l-5.1-4.8l11.6-12.6c4.2-4.5,11.1-5,15.5-1l0.7,0.6
								c4.3,4,4.4,11,0.2,15.5l-11.6,12.6"/>
						</g>
						<g id="initial-left-fing-c">
							<path class="st3" d="M455.1,407.8l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17l-0.7-0.7
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C450,395.7,450.3,403.4,455.1,407.8z"/>
							<path class="st10" d="M443,410.7l5.7,4l5.6-1.2l-4.6,4.6l4.8,5.1l12.6-11.6c4.5-4.2,5-11.1,1-15.5l-0.6-0.7
								c-4-4.3-11-4.4-15.5-0.2l-12.6,11.6"/>
						</g>
						<g id="initial-left-fing-d">
							<path class="st3" d="M472,441.6l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17l-0.7-0.7
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C466.9,429.5,467.2,437.1,472,441.6z"/>
							<path class="st10" d="M471.4,451.6l-4-5.7l1.2-5.6l-4.6,4.6l-5.1-4.8l11.6-12.6c4.2-4.5,11.1-5,15.5-1l0.7,0.6
								c4.3,4,4.4,11,0.2,15.5l-11.6,12.6"/>
						</g>
					</g>
					<g id="left-move-to">
						<g id="left-fing-a">
							<path class="st3" d="M374.3,395.7l1,0.3c6.3,2,13.1-1.5,15.1-7.8l8.6-27.3c2-6.3-1.5-13.1-7.8-15.1l-1-0.3
								c-6.3-2-13.1,1.5-15.1,7.8l-8.6,27.3C364.5,387,368,393.8,374.3,395.7z"/>
							<path class="st10" d="M361.8,399.9l5.2-16.3c1.9-5.9,8-9.2,13.6-7.5l0.8,0.3c5.6,1.8,8.7,8,6.8,13.9l-5.2,16.3l-4.8-7.8L378,405
								L361.8,399.9z"/>
						</g>
						<g id="left-fing-b">
							<path class="st3" d="M431.4,378.9l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17l-0.7-0.7
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C426.3,366.8,426.6,374.5,431.4,378.9z"/>
							<path class="st10" d="M430.8,388.9l-4-5.7l1.2-5.6l-4.6,4.6l-5.1-4.8l11.6-12.6c4.2-4.5,11.1-5,15.5-1l0.7,0.6
								c4.3,4,4.4,11,0.2,15.5l-11.6,12.6"/>
						</g>
						<g id="left-fing-c">
							<path class="st3" d="M462.4,400.6l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17L498,362
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C457.2,388.5,457.5,396.1,462.4,400.6z"/>
							<path class="st10" d="M450.2,403.5l5.7,4l5.6-1.2l-4.6,4.6l4.8,5.1l12.6-11.6c4.5-4.2,5-11.1,1-15.5l-0.6-0.7
								c-4-4.3-11-4.4-15.5-0.2l-12.6,11.6"/>
						</g>
						<g id="left-fing-d">
							<path class="st3" d="M486.2,427.4l0.7,0.7c4.8,4.5,12.5,4.2,17-0.7l19.4-21c4.5-4.8,4.2-12.5-0.7-17l-0.7-0.7
								c-4.8-4.5-12.5-4.2-17,0.7l-19.4,21C481.1,415.3,481.4,422.9,486.2,427.4z"/>
							<path class="st10" d="M485.6,437.4l-4-5.7l1.2-5.6l-4.6,4.6l-5.1-4.8l11.6-12.6c4.2-4.5,11.1-5,15.5-1l0.7,0.6
								c4.3,4,4.4,11,0.2,15.5L489.5,441"/>
						</g>
					</g>
				</g>
				<g id="right-hand">
					<path id="right-palm-light" class="st3" d="M128.2,369.4c-11.5,4.7-26.5,0-26.5,0s-11.8-12.2-23.6,6.5
						C66.4,394.6,26,426.4,26,426.4s23.8,34.3,50.6,33.3s50.2-25.6,62.7-42S139.6,364.7,128.2,369.4z"/>
					<path id="right-palm" class="st7" d="M130.2,371.4c-11.5,4.7-26.5,0-26.5,0s-11.8-12.2-23.6,6.5C68.4,396.6,28,428.4,28,428.4
						s23.8,34.3,50.6,33.3s50.2-25.6,62.7-42C153.8,403.3,141.6,366.7,130.2,371.4z"/>
					<g id="right-initial-fingers">
						<g id="initial-right-fing-a">
							<path class="st3" d="M141.8,415.3h-1c-6.6,0-12-5.4-12-12v-28.6c0-6.6,5.4-12,12-12h1c6.6,0,12,5.4,12,12v28.6
								C153.8,409.9,148.4,415.3,141.8,415.3z"/>
							<path class="st10" d="M152.4,423v-17.1c0-6.2-4.8-11.2-10.7-11.2h-0.9c-5.9,0-10.7,5-10.7,11.2V423l6.9-6l-1.7,6H152.4z"/>
						</g>
						<g id="initial-right-fing-b">
							<path class="st3" d="M109.3,390.4l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C114.5,378.2,114.2,385.9,109.3,390.4z"/>
							<path class="st10" d="M109.9,400.3l4-5.7l-1.2-5.6l4.6,4.6l5.1-4.8l-11.6-12.6c-4.2-4.5-11.1-5-15.5-1l-0.7,0.6
								c-4.3,4-4.4,11-0.2,15.5l11.6,12.6"/>
						</g>
						<g id="initial-right-fing-c">
							<path class="st3" d="M75.2,408.8l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C80.3,396.7,80,404.4,75.2,408.8z"/>
							<path class="st10" d="M87.3,411.7l-5.7,4l-5.6-1.2l4.6,4.6l-4.8,5.1l-12.6-11.6c-4.5-4.2-5-11.1-1-15.5l0.6-0.7
								c4-4.3,11-4.4,15.5-0.2l12.6,11.6"/>
						</g>
						<g id="initial-right-fing-d">
							<path class="st3" d="M58.3,442.6l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C63.5,430.5,63.2,438.1,58.3,442.6z"/>
							<path class="st10" d="M58.9,452.6l4-5.7l-1.2-5.6l4.6,4.6l5.1-4.8l-11.6-12.6c-4.2-4.5-11.1-5-15.5-1l-0.7,0.6
								c-4.3,4-4.4,11-0.2,15.5L55,456.2"/>
						</g>
					</g>
					<g id="right-move-to">
						<g id="right-fing-a">
							<path class="st3" d="M154.1,397.4l-1,0.3c-6.3,2-13.1-1.5-15.1-7.8l-8.6-27.3c-2-6.3,1.5-13.1,7.8-15.1l1-0.3
								c6.3-2,13.1,1.5,15.1,7.8l8.6,27.3C163.9,388.6,160.4,395.4,154.1,397.4z"/>
							<path class="st10" d="M166.6,401.6l-5.2-16.3c-1.9-5.9-8-9.2-13.6-7.5L147,378c-5.6,1.8-8.7,8-6.8,13.9l5.2,16.3l4.8-7.8
								l0.2,6.2L166.6,401.6z"/>
						</g>
						<g id="right-fing-b">
							<path class="st3" d="M98,378.6l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C103.2,366.5,102.9,374.1,98,378.6z"/>
							<path class="st10" d="M98.6,388.6l4-5.7l-1.2-5.6l4.6,4.6l5.1-4.8l-11.6-12.6c-4.2-4.5-11.1-5-15.5-1l-0.7,0.6
								c-4.3,4-4.4,11-0.2,15.5l11.6,12.6"/>
						</g>
						<g id="right-fing-c">
							<path class="st3" d="M67.1,400.3l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C72.2,388.2,71.9,395.8,67.1,400.3z"/>
							<path class="st10" d="M79.2,403.2l-5.7,4l-5.6-1.2l4.6,4.6l-4.8,5.1l-12.6-11.6c-4.5-4.2-5-11.1-1-15.5l0.6-0.7
								c4-4.3,11-4.4,15.5-0.2l12.6,11.6"/>
						</g>
						<g id="right-fing-d">
							<path class="st3" d="M43.2,427.1l-0.7,0.7c-4.8,4.5-12.5,4.2-17-0.7l-19.4-21c-4.5-4.8-4.2-12.5,0.7-17l0.7-0.7
								c4.8-4.5,12.5-4.2,17,0.7l19.4,21C48.4,415,48.1,422.6,43.2,427.1z"/>
							<path class="st10" d="M43.8,437l4-5.7l-1.2-5.6l4.6,4.6l5.1-4.8l-11.6-12.6c-4.2-4.5-11.1-5-15.5-1l-0.7,0.6
								c-4.3,4-4.4,11-0.2,15.5L40,440.6"/>
						</g>
					</g>
				</g>
			</g>
		</svg>
		<svg class="cauldron-and-bubbles" x="0px" y="0px" viewBox="0 0 529 591" style="enable-background:new 0 0 529 591;" xml:space="preserve">
			<style type="text/css">
				.st0{fill:#263238;}
				.st1{fill:#2D3079;}
				.st2{fill:#14499E;}
				.st3{fill:#A5D5A7;}
				.st4{fill:#F5F5F5;stroke:#2D3079;stroke-width:3;stroke-miterlimit:10;}
				.st5{fill:#F5F5F5;}
				.st6{fill:#4DAF4E;}
				.st7{fill:#66BB6A;}
				.st8{fill:#692C90;}
				.st9{fill:#4B2D87;}
				.st10{fill:#FFF278;}
				.st11{fill:#04897B;}
				.st12{fill:#25A69A;}
				.st13{fill:#009688;}
				.st14{fill:#4CB6AC;}
				.st15{fill:#434343;}
				#bubbles path {
					filter: url(#glow);
				}
			</style>
			<defs>
				<!-- Glowing Pulse Animation -->
				<filter id="glow">
				  <!--Blur effect-->
				  <feGaussianBlur stdDeviation="7" result="blur1">
				    <animate attributeName="stdDeviation"
				             from="3" to="7" dur="1s" repeatCount="indefinite"
				             values="3; 7; 7; 3;" keyTimes="0; 0.45; 0.75; 1"
				             keySplines=".42 0 1 1;
				                         0 0 .59 1;
				                         .42 0 1 1;
				                         0 0 .59 1;
				                         .42 0 1 1;
				                         0 0 .59 1;
				                         .42 0 1 1;
				                         0 0 .59 1;"/>
				  </feGaussianBlur>
				  <!--Composition of inputs-->
				  <feComposite in="SourceGraphic" in2="blur1" operator="arithmetic"
				              k1="0" k2="1" k3="1" k4="0" />
				</filter>
			</defs>
			<g >
				<g id="bubbles">
					<circle class="st11" cx="141.3" cy="507.6" r="34.8"/>
					<circle class="st11" cx="392.1" cy="517.4" r="31.1"/>
					<circle class="st11" cx="268" cy="497.4" r="43.6"/>
					<circle class="st12" cx="208.3" cy="497.8" r="39.4"/>
					<circle class="st12" cx="343" cy="512.3" r="39.4"/>
					<circle class="st13" cx="167.2" cy="479.8" r="14.8"/>
					<circle class="st14" cx="377.8" cy="491.2" r="11.8"/>
					<circle class="st13" cx="315.9" cy="490.3" r="23.4"/>
				</g>
				<path id="cauldron" class="st15" d="M494,543.4h11.3c6.6,0,12-5.4,12-12v-12c0-6.6-5.4-12-12-12H24.9c-6.6,0-12,5.4-12,12v12
					c0,6.6,5.4,12,12,12h9.7C20,556.7,10,584,10,584h254.3h254.3C518.6,584,508.6,556.7,494,543.4z"/>
			</g>
		</svg>
		<div id="bubble-up">
		          <div class="bubble-up x1"></div>
		          <div class="bubble-up x2"></div>
		          <div class="bubble-up x3"></div>
		          <div class="bubble-up x4"></div>
		          <div class="bubble-up x5"></div>
		          <div class="bubble-up x6"></div>
		          <div class="bubble-up x7"></div>
		          <div class="bubble-up x8"></div>
		          <div class="bubble-up x9"></div>
		          <div class="bubble-up x10"></div>
		  </div>
	</section>

	<h2>05: Witch</h2>
/* GENERAL ========================= */
body {
	background: -webkit-radial-gradient(center, ellipse cover,  #C2185B 0%,#AD1457 41%,#880E4F 100%);
	display: flex;
	flex-direction: column;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: space-around;
	align-items: center;
	min-height: 100vh;
	font-family: 'Amatica SC', cursive;
	text-align: center;
	color: #fff;
	padding-bottom: 65px;
	font-size: 20px;
}
h1, h2 {
	margin: 0;
}
h1 {
	font-size: 50px;
}
h1 span {
	color: #B2FF59;
}
h2 {
	font-size: 30px;
}
svg {
	height: 45vh;
  margin-bottom: -30px;
}
svg:hover {
	cursor: pointer;
}
a {
  color: #fff;
  text-decoration:none;
  margin: 0;
  position: absolute;
  top: 10px;
  right: 20px;
}

footer {
	background: rgba(0,0,0,0.8);
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* WITCH ========================= */
.svg-wrap {
	position: relative;
}
.svg-wrap svg:last-of-type {
	top: 0;
    left: 0;
	position: absolute;
}
#left-move-to,
#right-move-to {
	display: none;
}

#bubbles path {	
	animation: bubbles 1.75s infinite;
}
#bubbles path:nth-child(even) {	
	animation: bubbles 1.5s infinite;
	animation-delay: 0.2s;
}
#bubbles path:nth-child(3) {
	animation-delay: 0.3s;
}
#bubbles path:nth-child(5) {
	animation-delay: 0.1s;
}

@keyframes bubbles {
  0% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
.cauldron-and-bubbles {
	z-index: 1;
}

#bubble-up { 
	position: absolute;
    width: 300px;
    left: 0;
    bottom: 240px;
}
.bubble-up {width: 10px; height: 10px; background: #4DB6AC; border-radius: 50%; -moz-border-radius: 50%;
  -webkit-border-radius: 50%;  position: absolute;}
.x1 {
	left: 50px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
    -webkit-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
}

.x2 {
    left: 60px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.75;
    -webkit-animation: moveclouds 6s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 6s linear infinite, sideWays3s ease-in-out infinite alternate;
    -o-animation: moveclouds 6s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x3 {
    left: 70px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.6;
    -webkit-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 90px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.5;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 120px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.9; 
    -webkit-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x6 {
    left: 130px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
    -webkit-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 3s linear infinite, sideWays 3s ease-in-out infinite alternate;
}

.x7 {
    left: 160px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.75;
    -webkit-animation: moveclouds 6s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 6s linear infinite, sideWays3s ease-in-out infinite alternate;
    -o-animation: moveclouds 6s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x8 {
    left: 190px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.6;
    -webkit-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x9 {
    left: 140px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.5;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x10 {
    left: 170px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.9; 
    -webkit-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 
    0% { 
        top: 200px;
    }
    100% { 
        top: -200px;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:30px;
    }
}
MorphSVGPlugin.convertToPath('polygon'); 
		MorphSVGPlugin.convertToPath('circle'); 

		TweenLite.ticker.useRAF(false);

		var rightFingA1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var rightFingA2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var rightFingB1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var rightFingB2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var rightFingC1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var rightFingC2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var rightFingD1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var rightFingD2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		rightFingA1
		.to('#initial-right-fing-a path:first-of-type', 0.95, {morphSVG: {shape:'#right-fing-a path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-a path:first-of-type', 0.95, {morphSVG: {shape:'#initial-right-fing-a path:first-of-type'}, ease:Power0.easeInOut});
		rightFingA2
		.to('#initial-right-fing-a path:last-of-type', 0.95, {morphSVG: {shape:'#right-fing-a path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-a path:last-of-type', 0.95, {morphSVG: {shape:'#initial-right-fing-a path:last-of-type'}, ease:Power0.easeInOut});

		rightFingB1
		.to('#initial-right-fing-b path:first-of-type', 0.75, {morphSVG: {shape:'#right-fing-b path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-b path:first-of-type', 0.75, {morphSVG: {shape:'#initial-right-fing-b path:first-of-type'}, ease:Power0.easeInOut});
		rightFingB2
		.to('#initial-right-fing-b path:last-of-type', 0.75, {morphSVG: {shape:'#right-fing-b path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-b path:last-of-type', 0.75, {morphSVG: {shape:'#initial-right-fing-b path:last-of-type'}, ease:Power0.easeInOut});

		rightFingC1
		.to('#initial-right-fing-c path:first-of-type', 0.85, {morphSVG: {shape:'#right-fing-c path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-c path:first-of-type', 0.85, {morphSVG: {shape:'#initial-right-fing-c path:first-of-type'}, ease:Power0.easeInOut});
		rightFingC2
		.to('#initial-right-fing-c path:last-of-type', 0.85, {morphSVG: {shape:'#right-fing-c path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-c path:last-of-type', 0.85, {morphSVG: {shape:'#initial-right-fing-c path:last-of-type'}, ease:Power0.easeInOut});

		rightFingD1
		.to('#initial-right-fing-d path:first-of-type', 0.65, {morphSVG: {shape:'#right-fing-d path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-d path:first-of-type', 0.65, {morphSVG: {shape:'#initial-right-fing-d path:first-of-type'}, ease:Power0.easeInOut});
		rightFingD2
		.to('#initial-right-fing-d path:last-of-type', 0.65, {morphSVG: {shape:'#right-fing-d path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-right-fing-d path:last-of-type', 0.65, {morphSVG: {shape:'#initial-right-fing-d path:last-of-type'}, ease:Power0.easeInOut});


		var leftFingA1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var leftFingA2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var leftFingB1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var leftFingB2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var leftFingC1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var leftFingC2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		var leftFingD1 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});
		var leftFingD2 = new TimelineMax({repeat:-1, repeatDelay:0, delay: 0});

		leftFingA1
		.to('#initial-left-fing-a path:first-of-type', 0.95, {morphSVG: {shape:'#left-fing-a path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-a path:first-of-type', 0.95, {morphSVG: {shape:'#initial-left-fing-a path:first-of-type'}, ease:Power0.easeInOut});
		leftFingA2
		.to('#initial-left-fing-a path:last-of-type', 0.95, {morphSVG: {shape:'#left-fing-a path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-a path:last-of-type', 0.95, {morphSVG: {shape:'#initial-left-fing-a path:last-of-type'}, ease:Power0.easeInOut});

		leftFingB1
		.to('#initial-left-fing-b path:first-of-type', 0.75, {morphSVG: {shape:'#left-fing-b path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-b path:first-of-type', 0.75, {morphSVG: {shape:'#initial-left-fing-b path:first-of-type'}, ease:Power0.easeInOut});
		leftFingB2
		.to('#initial-left-fing-b path:last-of-type', 0.75, {morphSVG: {shape:'#left-fing-b path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-b path:last-of-type', 0.75, {morphSVG: {shape:'#initial-left-fing-b path:last-of-type'}, ease:Power0.easeInOut});

		leftFingC1
		.to('#initial-left-fing-c path:first-of-type', 0.85, {morphSVG: {shape:'#left-fing-c path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-c path:first-of-type', 0.85, {morphSVG: {shape:'#initial-left-fing-c path:first-of-type'}, ease:Power0.easeInOut});
		leftFingC2
		.to('#initial-left-fing-c path:last-of-type', 0.85, {morphSVG: {shape:'#left-fing-c path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-c path:last-of-type', 0.85, {morphSVG: {shape:'#initial-left-fing-c path:last-of-type'}, ease:Power0.easeInOut});

		leftFingD1
		.to('#initial-left-fing-d path:first-of-type', 0.65, {morphSVG: {shape:'#left-fing-d path:first-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-d path:first-of-type', 0.65, {morphSVG: {shape:'#initial-left-fing-d path:first-of-type'}, ease:Power0.easeInOut});
		leftFingD2
		.to('#initial-left-fing-d path:last-of-type', 0.65, {morphSVG: {shape:'#left-fing-d path:last-of-type'}, ease:Power0.easeInOut})
		.to('#initial-left-fing-d path:last-of-type', 0.65, {morphSVG: {shape:'#initial-left-fing-d path:last-of-type'}, ease:Power0.easeInOut});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js