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

Pen Settings

CSS Base

Vendor Prefixing

Add External 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.

            
              <div class="info">Click to turn into a VAMPIRE</div>
<div id="container">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 289.33 333.89" preserveAspectRatio="true">
	  <defs>
		<linearGradient id="linear-gradient" x1="148.12" x2="148.12" y1="262.83" y2="328.76" gradientUnits="userSpaceOnUse">
		  <stop offset="0" stop-color="#151a0c"/>
		  <stop offset="1" stop-color="#2e2b40" stop-opacity="0"/>
		</linearGradient>
		<linearGradient id="linear-gradient-2" x1="127.92" x2="171.82" y1="135.57" y2="91.67" gradientUnits="userSpaceOnUse">
		  <stop offset="0" stop-color="#f3e8c3"/>
		  <stop offset="1" stop-color="#b4a373"/>
		</linearGradient>
		<linearGradient id="linear-gradient-3" x1="8.87" x2="43.29" y1="27.47" y2="27.47" gradientUnits="userSpaceOnUse">
		  <stop offset="0" stop-color="#566082"/>
		  <stop offset="1" stop-color="#474650"/>
		</linearGradient>
		<linearGradient id="linear-gradient-4" x1="53.39" x2="84.82" y1="30.5" y2="30.5" xlink:href="#linear-gradient-3"/>
		<linearGradient id="linear-gradient-5" x1="94.92" x2="127.01" y1="28.45" y2="28.45" xlink:href="#linear-gradient-3"/>
		<linearGradient id="linear-gradient-6" x1="126.89" x2="133.39" y1="145.97" y2="139.47" gradientUnits="userSpaceOnUse">
		  <stop offset="0" stop-color="#f3e8c3"/>
		  <stop offset="1" stop-color="#786a67"/>
		</linearGradient>
		<linearGradient id="linear-gradient-7" x1="152.47" x2="158.98" y1="146.47" y2="139.96" gradientTransform="matrix(-.98 0 0 1 313.33 0)" xlink:href="#linear-gradient-6"/>
		  
		<path id="smoke-2" d="M6,9s.2-9,5.58-9,7.11,2.88,7.11,2.88,3.73-4.62,10.5,3.19,1.85,9,1.85,9,6.7,6.09,1.16,11.26-13.08,8.15-18.93,4.25A9,9,0,0,1,9.4,21.83S3,26.48.74,20.39C-2.51,11.53,6,9,6,9Z" style="fill: url(#linear-gradient)"/>
      	<path id="smoke-1" d="M7.16,10.55S6,8,9.52,3.92c3.73-4.32,8.39-.05,8.39-.05s10.6-7.15,10.5,3.19a16.12,16.12,0,0,1-3,8.89s11.54,6.19,6,11.36-8.75,3.24-14.25,3.24a9.94,9.94,0,0,1-8.49-4.7s-4.19,0-6.42-6.07C-1,10.91,7.16,10.55,7.16,10.55Z" style="fill: url(#linear-gradient-2)"/>
      	<path id="smoke-0" d="M6.83,9.56S5.72,6.34,11,5.53c7.21-1.09,6.17,2.94,6.17,2.94S19.89-.23,28.08,6.07c5.17,4,1.69,9.13,1.69,9.13s6.86,6,1.32,11.13-8.39-.18-13.88-.18c-5.92,0-8.86-1.28-8.86-1.28s-4.19,0-6.42-6.07C-1.32,9.92,6.83,9.56,6.83,9.56Z" style="fill: url(#linear-gradient-3)"/>
	  
	  </defs> 
	  <ellipse id="shadow" cx="0" cy="0" rx="69.07" ry="21.69" style="fill: #000000"/>
	  <g id="vampire">
<!-- 		<path id="shadow" fill="url(#linear-gradient)" d="M93.59 262.83l-28.45 65.93H231.1l-29.81-64.12-107.7-1.81z" opacity=".25"/> -->
		<path id="collar" fill="#9e1d20" d="M89.35 111.33s35.47-15.88 55.89-15.88c20.89 0 54.06 11.07 54.06 11.07s-28.79 11.17-31.5 36.9c-2 19.09-44.52 20.78-46.27.69-2.3-26.37-32.18-32.78-32.18-32.78z"/>
		<path id="cloak-back" d="M128.43 130.11a1.61 1.61 0 0 1 1.64-2h35.42s8.7 0 9.31 4.44c.84 6.08 5.6 111.26 24.19 128.1s-81.41 9.67-86.18-2.51 14.71-81.1 16.06-99.71-.44-28.32-.44-28.32z"/>
		<g id="arm">
		  <g id="hand">
			<g id="finger-4">
			  <path fill="#f3e8c3" d="M232.39 120.24s2.92-3.57 4-3.48a12.08 12.08 0 0 0 4.77-.23c1.77-.5 1.34 1.77 1.34 1.77s-2 2.09-4 1.71-4.84 1.86-4.84 1.86z"/>
			  <g fill="#b4a373">
				<path d="M242.46 118.3a3.27 3.27 0 0 0 0-.37 5 5 0 0 1-2.39 1 13.74 13.74 0 0 1-3.6 0c-1.09 0-2.39 1.9-3 2.84l.06.08s2.87-2.24 4.84-1.86 4.09-1.69 4.09-1.69z"/>
				<path d="M242.46 118.3a3.27 3.27 0 0 0 0-.37 5 5 0 0 1-2.39 1 13.74 13.74 0 0 1-3.6 0c-1.09 0-2.39 1.9-3 2.84l.06.08s2.87-2.24 4.84-1.86 4.09-1.69 4.09-1.69z"/>
			  </g>
			</g>
			<path id="palm" fill="#f3e8c3" d="M217.58 122.57a39.56 39.56 0 0 1 8.62-3.45c2.82-.66 2.44-2 7-2.14 1.59-.05 3.22 1.77 3.22 5.59s0 9.06-7.8 6c-2.29-.88-3.27 8.46-10.27 1-2.61-2.81-.77-7-.77-7z"/>
			<g id="finger-3">
			  <path fill="#f3e8c3" d="M231.86 121.93a1.38 1.38 0 0 1 .86-1.53c1.6-.62 4.55-1.64 5.34-1.16a15.12 15.12 0 0 0 5.4 2.34c1.57.29 1.17 1.46.78 2.14a1.36 1.36 0 0 1-.87.64c-1 .25-3.39.64-4.87-.48-1.29-1-3.68-.94-5.15-.8a1.39 1.39 0 0 1-1.5-1.14z"/>
			  <path fill="#b4a373" d="M240.83 123.76c-1.59-.35-1.78-1-3.26-1.45-1.15-.35-3.72.35-4.81.67a1.37 1.37 0 0 0 .61.09c1.47-.14 3.86-.18 5.15.8 1.48 1.12 3.82.73 4.87.48a1.36 1.36 0 0 0 .87-.64l.1-.2c-.9.67-2.03.58-3.53.25z"/>
			</g>
			<g id="finger-2">
			  <path fill="#f3e8c3" d="M232.36 122.92s6.73-1.29 7.86-.27a18.11 18.11 0 0 0 5.75 4c2.53 1-.11 3.11-.11 3.11s-4.31.48-6.24-1.68-7.36-2.27-7.36-2.27z"/>
			  <path fill="#b4a373" d="M230.53 126.28a7.56 7.56 0 0 1 5-1.22c3 .28 5.32 2.52 6.62 3.31a7.92 7.92 0 0 0 4 1.1c-4.65 1.78-7.21-3.25-11.62-3.25-1.53 0-4 .06-4 .06z"/>
			</g>
			<path id="finger-1" fill="#f3e8c3" d="M229.51 125.71s5.67-1.89 6.66-.68a16.14 16.14 0 0 0 5 4.65c2.18 1.15 0 3.84 0 3.84s-3.64.78-5.34-1.8-6.93-3.78-6.93-3.78z"/>
			<g id="thumb">
			  <path fill="#f3e8c3" d="M220.8 129.4l2 4a5.44 5.44 0 0 0 1.9 2.18 5 5 0 0 1 2 2.76c.67 2.14 2.24 2.12 3.71 1.36a3.19 3.19 0 0 0 .65-5c-1.69-1.71-5.33-6.33-5.33-6.33z"/>
			  <path fill="#b4a373" d="M229 139.32a3.53 3.53 0 0 0 1-4.32 2.85 2.85 0 0 0-.51-.73c-2.83-2.84-2.83-4.75-2.83-4.75a48.39 48.39 0 0 0 4.36 5.14c1.86 2 .59 5.31-1.61 5.3-.99.04-.87-.3-.41-.64z"/>
			</g>
			<path id="shadow-2" fill="#b4a373" d="M217.58 122.57l3.45-1.67s1 1 1.47 4.38a16.76 16.76 0 0 1-.82 6.9l-2.15.81z" data-name="shadow"/>
		  </g>
		  <rect id="shirt" width="13.05" height="18.27" x="208.15" y="120.03" fill="#e8e8e8" rx="3.89" ry="3.89" transform="rotate(-5 214.68 129.19)"/>
		  <path id="upper-arm" fill="#212121" d="M161.19 133.69l17.19-7.86c1.37-.57 8.17-3.4 9.65-3.35 2.66.1 7.85 1.84 9.19 5.65A11.61 11.61 0 0 1 192.6 142c-2 1.23-3.86 2.34-6 3.94-1.34 1-8.95 5.32-14.87 9.09a10.43 10.43 0 0 1-15.4-5.07l-.08-.22a38 38 0 0 1-1.21-4.17 10.41 10.41 0 0 1 6.15-11.88z"/>
		  <path id="lower-arm" fill="#212121" d="M209.8 120.27l-21.8 2.22s-7 .78-5.37 11.78 10.67 8.65 10.67 8.65l18.78-1.69s4.15.83 5.21-5.41.81-9.76-1.25-13.2-6.24-2.35-6.24-2.35z"/>
		</g>
		<g id="body">
		  <path fill="#212121" d="M123.68 129.85c-2.48 1.1-2.13 7.14-4.91 12.41a18 18 0 0 0-1.87 9.15c.63 22.2-16.68 49.14-4.37 64.27 2 2.43 4.09 3.63 8.32 6 20.38 11.57 49.91 9.24 56.58-3.74a14.4 14.4 0 0 0 1.46-7.07c-.44-26.41-7.05-37.55-4.58-60.32a15.61 15.61 0 0 0-4.95-12.81c-11.26-10.8-31.42-14.21-45.68-7.89z"/>
		  <rect width="27.6" height="21.71" x="131.36" y="142.43" fill="#e8e8e8" rx="5.33" ry="5.33"/>
		  <rect width="27.6" height="21.71" x="131.36" y="134.34" fill="#a9a8a9" rx="5.33" ry="5.33"/>
		  <ellipse cx="145.18" cy="137.06" rx="19.51" ry="7.5"/>
		</g>
		
		<g id="head">
		  <g id="face">
			<path fill="#f3e8c3" d="M173.35 103.45c-2.57-16.17-14.5-28.4-28.85-28.4s-26.14 12.08-28.8 28.1a7.6 7.6 0 0 0-3.41 6.33v3.75a7.61 7.61 0 0 0 4.09 6.72 35.31 35.31 0 0 0 11.34 18.63v2c0 6.6 5.09 12 11.31 12h11c6.22 0 11.31-5.4 11.31-12v-2a35.36 35.36 0 0 0 11.4-18.87 7.6 7.6 0 0 0 3.67-6.48v-3.75a7.58 7.58 0 0 0-3.06-6.03z"/>
			<path fill="url(#linear-gradient-2)" d="M176.36 113.24v-3.75a7.58 7.58 0 0 0-3-6c-2.54-16-14.28-28.16-28.45-28.39v25.73l5.47-.45-5.5 1.81v1.95l8.12-.94-8.12 2.61v5.81l8.12-.46-4.38 2-1.72 10.59s1.18 4.67 1.18 5.54c-1.22.64-3.19.74-3.2 1.86s0 4.53 0 4.53l3.42.81-3.42.93v15.12H150c6.22 0 11.31-5.4 11.31-12v-2a35.36 35.36 0 0 0 11.4-18.87 7.6 7.6 0 0 0 3.65-6.43z"/>
		  </g>
		  <g id="eye-left">
			<ellipse cx="131.76" cy="112.35" fill="#414042" rx="11.15" ry="10"/>
			<ellipse id="left-eye-white" cx="130.91" cy="111.59" fill="#fff" rx="10.42" ry="9.24"/>
			<circle id="left-eye-pupil" cx="130.91" cy="111.59" r="4.37" fill="#414042"/>
		  </g>
		  <g id="eye-right">
			<ellipse cx="157.98" cy="112.35" fill="#414042" rx="11.15" ry="10"/>
			<ellipse id="right-eye-white" cx="158.52" cy="111.59" fill="#fff" rx="10.42" ry="9.24"/>
			<circle id="right-eye-pupil" cx="158.67" cy="111.59" r="4.37" fill="#414042"/>
		  </g>
		  <g id="mouth">
			<path fill="#b4a373" d="M139.69 145.26l3.3-7.74h-6.61l3.31 7.74zm7.36-7.74l3.31 7.74 3.31-7.74h-6.62z"/>
			<path fill="#fff" d="M138.26 144.82l3.31-7.73h-6.62l3.31 7.73zm7.36-7.73l3.31 7.73 3.31-7.73h-6.62z"/>
			<path fill="none" stroke="#414042" stroke-miterlimit="10" d="M132.36 133.7a3.19 3.19 0 0 0 2.85 3.38h18.87a3.64 3.64 0 0 0 2.17-3.38"/>
		  </g>
		  <path id="nose" fill="#414042" d="M146.92 123.76l-.59-12.76a4.13 4.13 0 0 1 3.24-4.58h.06m-9.11 22.88a12.31 12.31 0 0 0 3.9.89 10.36 10.36 0 0 0 3.68-.89 5 5 0 0 1-3.68 2 5.76 5.76 0 0 1-3.9-2z"/>
		  <g id="brow">
			<path fill="#414042" d="M144.3 113.8c-12.39-.06-24.69-6.79-24.16-10.63.42-3.1 9.16-4.36 17.26-5.52 10-1.45 16.44-.36 18.36 0 5.15 1 12.75 2.39 13.12 5.38.49 3.97-12 10.83-24.58 10.77z"/>
			<path fill="#f3e8c3" d="M168.16 104.13a3.08 3.08 0 0 0 .71-2.1 1.88 1.88 0 0 0-.09-.33c.31-5.6-5.36-14.2-12.15-14.71-5.36-.4-10.69 4.3-12.38 9-2 .1-4.34.3-6.86.66-8.1 1.17-16.84 2.43-17.26 5.52-.52 3.84 11.77 9.58 24.16 9.63 7.71 0 15.38-1.52 20.06-4.42a7.59 7.59 0 0 0 3.81-3.25z"/>
			<path fill="#b4a373" d="M134.07 99c.89.24 1.78.49 2.68.68s1.79.4 2.7.56a30.78 30.78 0 0 0 5.47.53 24.31 24.31 0 0 0 2.75-.09c.92-.08 1.82-.23 2.73-.36s1.8-.34 2.69-.57 1.77-.47 2.65-.75a27.73 27.73 0 0 1-10.85 2.22 28.52 28.52 0 0 1-5.6-.66 35.21 35.21 0 0 1-5.29-1.49z"/>
			<path fill="#b4a373" d="M126.57 100.87c1.39.49 2.76 1 4.17 1.37s2.79.81 4.2 1.13a37.22 37.22 0 0 0 8.51 1.08 29.13 29.13 0 0 0 4.27-.19c1.42-.15 2.82-.47 4.24-.73a38.49 38.49 0 0 0 4.18-1.14 39.5 39.5 0 0 0 4.11-1.51l.05.09a35.1 35.1 0 0 1-8.15 3.32 32.57 32.57 0 0 1-8.72 1.17 34.64 34.64 0 0 1-8.7-1.32 45.7 45.7 0 0 1-8.22-3.16z"/>
		  </g>
		  <g id="hair">
			<path fill="#212121" d="M171.67 105.87a4.48 4.48 0 0 1 2.07.93C172.4 89 159.83 75.06 144.5 75.06c-15.1 0-27.53 13.55-29.17 31a4.39 4.39 0 0 1 1.62-.86v-.17a27.37 27.37 0 0 1 5.69-11c2.13-2.46 4.92-4.73 8.23-5.28 7.94-1.34 13.59 8.2 13.59 8.2s5.75-8 13-8.15c3.68-.1 6.93 2.89 9.24 5.85a25.11 25.11 0 0 1 4.65 10c.15.35.23.79.32 1.22z"/>
			<path fill="#53505e" d="M144.5 96.92c-.76-7.52-5.09-15.48-11.14-16.57a9.78 9.78 0 0 0-5 .49c-7.07 5.57-12 14.67-13 25.19a4.39 4.39 0 0 1 1.62-.86V105a27.37 27.37 0 0 1 5.69-11c2.13-2.46 4.92-4.73 8.23-5.28 7.96-1.34 13.6 8.2 13.6 8.2z"/>
			<path fill="#b0b0b0" d="M144.45 96.92c-.29-1.1-.58-2.19-1-3.24a24.83 24.83 0 0 0-1.2-3.1c-.45-1-.92-2-1.46-2.94-.28-.46-.57-.93-.87-1.37s-.63-.88-1-1.3a17.88 17.88 0 0 0-2.15-2.4 11.63 11.63 0 0 0-2.59-1.74 6.44 6.44 0 0 0-3-.59 6.94 6.94 0 0 0-3.13.87L128 81a6.78 6.78 0 0 1 6.5-.9 12.86 12.86 0 0 1 5.26 4.23 21.7 21.7 0 0 1 3.24 5.98 25.59 25.59 0 0 1 1.53 6.61z"/>
		  </g>
		</g>
		<g id="cloak">
			<path id="material" d="M31.15,60.34s7.38,30.7,33.67,25C76.85,82.69,81,94.46,81,94.46l27,103.33s-8.82,5.39-25.48,5.39c-21.79,0-13.47-1.11-20.29-5.39s-34.91,0-34.91,0-25.76-2.1-23.08-10c7.39-21.86,19.33-109.26,18.7-118.26S31.15,60.34,31.15,60.34Z"/>
			<path id="cloak-line-2" fill="#53505e" d="M150.08 199.42l-2.53 72.09a11.7 11.7 0 0 1 4 1.33c3.48 2.18 3 3.54 4.63 4.35z" opacity=".5"/>
			<path id="cloak-line-1" fill="#212121" d="M116.67 272.84s4.15-.63 9.65-1.17l.64-96.63-10.71 97.76z"/>
		</g>
	  </g>
	 
	  
	  <g id="transform-lines" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10">
		<path id="line-9" d="M126 54.54c-8.83 87.81-7 140.46-3.13 173.19.42 3.6 4.33 36.44-5.34 40-7.4 2.73-13.91-14.91-32.4-18.15-18.28-3.2-27.26 11.35-40.83 5.18-8.11-3.68-15.43-13.65-13-22 2.3-7.8 12.66-12.82 20.09-11"/>
		<path id="line-8" d="M149.17 44.87c13.8 124.65 15 172.79 11.66 187.93-.43 2-2.21 9.2 1.31 15.72C168 259.3 184.31 260.91 197 262c18.13 1.55 48.16 4.11 61.71-14.28 1.05-1.43 10.46-14.55 4.54-24-4-6.34-13.69-9.09-24-6.48"/>
		<path id="line-7" d="M132.25 49.6c-7.25 102.75-2.39 142.59 3.88 159.4 1.82 4.89 9.68 23.71 1.3 38.88a30 30 0 0 1-9.72 10.37c-23.84 15.16-71.85-9.11-71.29-24.63.15-4 3.63-8.49 7.78-9.72 7.51-2.23 15.19 6.7 15.55 7.13"/>
		<path id="line-6" d="M142.69 37c-3.08 106.24-4.81 182.69-3.89 207.37a50.32 50.32 0 0 1-2.59 17.5c-7.32 21.94-30.09 39-39.53 34.35-4.43-2.16-6.49-9.37-5.83-14.91A18 18 0 0 1 96 270.93"/>
		<path id="line-5" d="M140.23 65.22c13.71 56.9 12.78 92.1 9.07 114.06-4.17 24.73-2.78 40.68 0 72.58a46.26 46.26 0 0 0 3.89 15.55c9.52 21.09 32.51 27.55 33.7 27.87 18.91 5 34.38-2.52 38.23-4.54"/>
		<path id="line-4" d="M160.14 87.28c7.53 65.47 5.94 104.72 2.64 129.13-.36 2.68-3.71 27.17 4.58 29.84 6.34 2 11.92-11.12 27.78-13.53 15.67-2.38 23.37 8.46 35 3.87 6.95-2.75 13.23-10.18 11.11-16.43-2-5.82-10.86-9.56-17.22-8.21"/>
		<path id="line-3" d="M140.23 80.07c-11.83 92.93-12.83 128.83-10 140.12.37 1.49 1.89 6.86-1.12 11.72-5 8-19 9.24-29.87 10-15.54 1.2-41.24 3.09-52.91-10.6-.9-1.06-9-10.85-3.89-17.88 3.41-4.72 11.73-6.78 20.56-4.83"/>
		<path id="line-2" d="M154.74 83.59c6.24 76.62 2 106.32-3.33 118.87-1.56 3.65-8.3 17.68-1.11 29a23.77 23.77 0 0 0 8.33 7.73c20.44 11.31 61.6-6.79 61.12-18.36-.13-3-3.11-6.33-6.67-7.25-6.44-1.66-13 5-13.33 5.32"/>
		<path id="line-1" d="M141.22 74.19c2.64 79.22 4.12 136.21 3.33 154.62a33 33 0 0 0 2.22 13c6.28 16.36 25.8 29.05 33.89 25.61 3.79-1.61 5.56-7 5-11.11a13 13 0 0 0-4.44-7.73"/>
		<path id="line-0" d="M121.34 90.27c-11.75 42.43-11 68.67-7.78 85 3.58 18.44 2.38 30.33 0 54.12a30.83 30.83 0 0 1-3.33 11.6c-8.17 15.73-27.87 20.54-28.89 20.78a52.51 52.51 0 0 1-32.78-3.38"/>
	  </g>
	   <g id="bat">
		<g id="wing-right">
		  <path fill="#535454" d="M143.73 152.24l14.12-36a3.94 3.94 0 0 1 2.07-2.16l30.17-13.4a5.92 5.92 0 0 1 2.4-.51h31.59a.35.35 0 0 1 .31.52l-4.06 7.45a14.25 14.25 0 0 0-1.54 4.45l-1.4 8.27a.35.35 0 0 1-.24.27l-12.34 4.09a23.91 23.91 0 0 0-11.13 7.78l-9.34 11.63a.36.36 0 0 1-.47.08l-3.8-2.26a13 13 0 0 0-17.54 4.15l-8 12.64a.35.35 0 0 1-.49.11l-10.15-6.68a.35.35 0 0 1-.16-.43z"/>
		  <path fill="#757577" d="M159.46 123.19a2.45 2.45 0 0 1 4.09-.76l18.63 20.41a2.4 2.4 0 0 1 .59 1.2l-2.69-1.6a13 13 0 0 0-17.54 4.15l-8 12.64a.35.35 0 0 1-.49.11l-6.8-4.48zm34.12 9.88l-9.34 11.63a.35.35 0 0 1-.24.13l-12.89-22.17a5.65 5.65 0 0 1 1.85-7.61l14.79-9.46a7.1 7.1 0 0 1 8 .23L217 121.27l-12.34 4.09a23.91 23.91 0 0 0-11.08 7.71zm13.17-29.15l16.53-1.2-3 5.54a14.25 14.25 0 0 0-1.54 4.45l-1.4 8.27-12.43-11.92a3 3 0 0 1 1.84-5.14z"/>
		</g>
		<g id="wing-left">
		  <path fill="#535454" d="M147 152.24l-14-36a3.93 3.93 0 0 0-2.06-2.16l-30-13.4a5.86 5.86 0 0 0-2.39-.51h-31.4a.35.35 0 0 0-.31.52l4 7.45a14.31 14.31 0 0 1 1.53 4.45l1.39 8.27a.35.35 0 0 0 .23.27l12.27 4.09A23.77 23.77 0 0 1 97.37 133l9.29 11.63a.36.36 0 0 0 .47.08l3.78-2.26a12.83 12.83 0 0 1 17.44 4.15l8 12.64a.35.35 0 0 0 .49.11l10.09-6.68a.35.35 0 0 0 .07-.43z"/>
		  <path fill="#757577" d="M131.4 123.19a2.43 2.43 0 0 0-4.06-.76l-18.53 20.41a2.4 2.4 0 0 0-.58 1.2l2.67-1.6a12.83 12.83 0 0 1 17.44 4.15l8 12.64a.35.35 0 0 0 .49.11l6.76-4.48zm-33.93 9.88l9.29 11.63a.35.35 0 0 0 .24.13l12.81-22.17a5.67 5.67 0 0 0-1.84-7.61l-14.7-9.46a7 7 0 0 0-7.94.23l-21.18 15.45 12.27 4.09a23.77 23.77 0 0 1 11.05 7.71zm-13.1-29.15l-16.43-1.2 3 5.54a14.31 14.31 0 0 1 1.53 4.45l1.4 8.29 12.36-11.92a3 3 0 0 0-1.86-5.16z"/>
		</g>
		<g id="head-2" data-name="head">
		  <ellipse cx="145.45" cy="154.7" fill="#535454" rx="11.18" ry="10.1"/>
		  <g fill="#434343">
			<path d="M159.06 154.6c0 .12.39.08.46.1-.1-.22-.52-.09-.46-.1zm-1.14-1.87h.17l-.46-.19.29.19zm-.46-1.73c-.6.38.3.57.15.95l-.14.09h.59c-.2-.34-.67-.71-.6-1.04zm1.05-1.5c-.23.18-.31-.11 0 .27v-.07a.7.7 0 0 1 0-.2zm.06.2c.1.19.16-.22 0 0zm-.57-.8l.35.13c.12-.13 0-.37.18-.34-.26-.2-.37-.06-.53.21zm-.58.03l.16.07c.05-.06.05-.1-.16-.07zm.49.22l-.33-.15c-.08.09-.28.2.13.08-.2.08.01.03.2.07zm-.02.2c-.07.2-.07.41-.41.29.31.36.74.13.41-.29zm-1.15 1.85l-.13.23.28.06c-.14-.03.05-.38-.15-.29zm.66-3.96c-.13.08-.27.31-.42.44l.25.06c.03-.13-.01-.35.17-.5zm-.4.45l-.38-.08c.1.22.22.19.38.08zm-.29 1.59l.7.14-.74-.21zm-.04-2.96l.38-.1-.6.11.22-.01zm-.57-.53c.3-.11.23-.47.45-.5a1.18 1.18 0 0 0-.77 0c.22.01.33.17.32.5zm-.73-.46a2 2 0 0 0 .41-.05.88.88 0 0 0-.41.05zm.97 1.85a.66.66 0 0 0 .19-.46l-.25.36zm-.07-.08l-.14-.2zm.09.1s-.05.03 0 0zm.3 1.27c-.29 0-.68-.13-.81.34.31-.07.37-.34.81-.34zm-.66-.83l.11.29c.09-.07.18-.21.33-.22zm-.17-.02l.2.02-.04-.11-.16.09zm-.35-1.62a.56.56 0 0 1-.47-.14 1.24 1.24 0 0 0 .28.46c.11-.09.33-.2.19-.32zm.38.54s-.05.05 0 0zm-2.09-1.68v.08-.06z"/>
			<path d="M155.25 146.39c0 .15.16.13.31.09a.84.84 0 0 1-.27-.17c-.05.04-.08.07-.04.08zm-.37-1.21a1.67 1.67 0 0 0 0 .33c.07-.15.12-.4 0-.33zm.99 1.24c.07-.09.04-.05 0 0zm0 0a1.07 1.07 0 0 0-.31.06.73.73 0 0 0 .26.06.63.63 0 0 1 .05-.12zm-4.01.45c.23-.32.68-.46.63 0 .37-.1 1-1.23 1.26-2a.67.67 0 0 1-.57.3c0 .24.21.76-.19.92-.41 0-.15-.27-.18-.55-.16.49-.77.35-1.09 1l.37-.06c-.09.17-.24.26-.23.39zm2.31-1.56h.12a1.48 1.48 0 0 1 0-.7.69.69 0 0 0-.5.23 5.22 5.22 0 0 1 .45.41z"/>
			<path d="M154.72 145.69c-.36.26-.69.23-.86.69.27.19.42-.13.7-.13-.5-.28.29-.07.13-.52a.67.67 0 0 1 .31.12 2.27 2.27 0 0 1-.1-.35c0 .06 0 .09 0 0l-.13.11c-.07-.17.05-.1.13-.11l-.6-.19c.06.16.18.25.42.38zm.22 3.43a.27.27 0 0 1 .06-.12s-.08.06-.06.12z"/>
			<path d="M155 148.8c.07 0 .22-.08.26 0s-.17.12-.28.21c.13 0 .39 0 .44-.28h-.07a1.69 1.69 0 0 1 .32-.81 6 6 0 0 0-.67.88zm-.1-1.46l-.46-.16-.11.42.15-.16c.11.22.27-.01.42-.1zm-1.05-2.69l.32-.33-.61.36.29-.03zm-.56-.31l.24-.32-.27.11.03.21zm-15.36 14.35h.14a.33.33 0 0 0-.14 0zm-.32-.56l-.18.08c.11-.02.18-.05.18-.08zm1-14.32c-.35-.23-.85-.61-.61-.23l.27.35a.27.27 0 0 1 .34-.12zm-4 8.82h.14l-.37-.21zm1.73.5l-.3.12a1 1 0 0 0 .3-.12zm4.45 7.58l.31-.33c-.1-.07-.19.15-.31.33zm6.47-18.36a.87.87 0 0 0-.41-.32c.15.27.31.67.41.32zM133.91 161a.33.33 0 0 0 .29 0 .28.28 0 0 0-.29 0zm12.42-19l.09.11a.61.61 0 0 1 .43-.08c-.14-.2-.32-.32-.52-.03zm6.29 17h.06-.06zm5.77-2.59a.78.78 0 0 1 0 .25s.04-.12 0-.25zM151.11 143c.14 0 0 0 0 0zm-.11 1.81a.47.47 0 0 0-.13.17.6.6 0 0 1 .13-.17zm-5.91-.13c.02.08.02.07 0 0zm6.13-1.43a.6.6 0 0 0-.11-.19.68.68 0 0 0 .11.19zm.06-.19l.09.09c.04-.07.05-.15-.09-.09z"/>
			<path d="M150.93 142.94a.44.44 0 0 1 .18.13v-.08zm-4.23 20.47c.11-.16.07-.12 0 0zm-7.87-14.28l-.01-.03h-.02l.03.03z"/>
			<path d="M138.83 149.58c-.29-.48-.18-.49 0-.48l-.94-.83q.44.67.94 1.31z"/>
			<path d="M139 159.79l.13-.42c.63-.28.57 0 .83-.54-.48.48-.64.37-.8.26s-.29-.24-.83.18l.13-.29h.09c.35-.61-.91.47-1 0a.39.39 0 0 1 .31-.37h-.43c0-.08.19-.19.21-.11a2.39 2.39 0 0 1-.31-.3 3.76 3.76 0 0 1-.73.09c.12-.19.15 0 .29-.12l-.41-.07c.27-.24.67-.22.7-.05 1.12-.81-.43 0 .13-.77l.23.12c.66-.43.35-.46.72-.81-.22.11-1 .85-1.36.76.07-.1.08-.2-.23-.23.45-.16.29-.24.23-.39l.61-.18c-.22-.1-.53 0-.83 0 0-.21.48-.36.87-.49.05-.3-.74.38-.92.05.21-.3-.1-.41-.51-.7.21-.21.39 0 .57-.09l-.52-.12h.25c-.21-.13-.64 0-.83-.2-.35 0-.11-.16.14-.31s.5-.3.11-.47c.18-.06.39.06.64.06a7.63 7.63 0 0 0-1-.77l.46-.21a1.7 1.7 0 0 1-1.43-.62 3.94 3.94 0 0 0-.56.1 4.5 4.5 0 0 1-.22-.53c.12 0 .32.07.56.21l-.13-.12c.27-.1.6.09.92.28l-.42.05a3.65 3.65 0 0 0 1.12.43.31.31 0 0 1-.14-.16.73.73 0 0 0 .25.09c.07 0-.06-.06-.2-.16l.71.09-.27-.09.55-.31c-.58-.51-1.46-1.23-1.42-1.95a4.85 4.85 0 0 0 1.3.7c-.68-.15.07.51-.15.7.12-.11.38 0 .46.1a7.12 7.12 0 0 1-.36-.69c.45.23.39.07.64.06-.93-.37-.42-.64-.57-1 .29.17.55.38.37.56.76.15-.82-.92-.12-.82 0 .06-.09.06 0 .17-.17-.29.24-.46.42-.22v.06a1.11 1.11 0 0 0 .23-1.59c.08.07.7.75.81.89a19.47 19.47 0 0 1-1.4-2.63c.44.59 1.78 1.72 1.81 2.26.13 0 .31 0 .29-.29-.11 0-.82-.69-.79-.81a7.73 7.73 0 0 0 1.1.56c-.17-.06-.79-1-.62-1.12.08.15.68.9.71 1q-.18-.56-.31-1.14a3 3 0 0 0 .77 1c-.15-.16.28-.17.31-.32l-.27-.13c.45-.08-.41-1.59.08-1.79 0 .24.54 1.34.79 1.36-.19-.56-.74-2.7-.4-3.33l.21.27.24-.48c0 .89.15 2.84.21 3.58.26.17.2.33.41.21a.39.39 0 0 1 0 .52h.55c-.28-.63.16-.76 0-1.29a6.53 6.53 0 0 0-.33.87c-.3-.61-.37-1.93.13-2a6.9 6.9 0 0 1 .37 1.37c0-.23.24-.55.32-.4l-.06.4c.27.17.12-1 .55-.4.11 0 .45.78.39.39a17 17 0 0 1-.85-3.62 3.72 3.72 0 0 1 1 1c.26.57 0 1.45.19 1.94a1.28 1.28 0 0 1 .06-.5c.13.14 0 .57.25.46-.05-.68.46 0 0-.59.21-.22.25.09.52.06a2.45 2.45 0 0 1 .41-1.71 1.69 1.69 0 0 0 .09.5c.52 0 .78.39 1.24.4 0 .17.23.37.11.66.07-.12.15-.34.29-.34.2.62-.31 0-.18.78.05-.39.4-.5.63-.71 0-.61-.45-.18-.66 0a2.47 2.47 0 0 1 1.14-2c.47-.14.09.56.19.46.73.33 1-1.29 1.55-.51.11.6-.3 1-.35 1.42-.36.08-.4-.46-.64-.5l.21.31c-.15.15-.39.23-.47.05 0 .26.35.34.69.46a1.67 1.67 0 0 1 .9.58c.16-.13.39-.23.4-.46h-.2c0-.47.55-.41.4-.7.35-.18.84-.49 1.09-.11l-.21.58c.08-.17-.06-.44-.24-.31.28-.19.13 1 .65.36v-.5c.38-.14 1-.54 1.24-.19.17-.6-.1 0 0-.72-.24.87-.82-.49-.94.5.14-.86-.24-.53-.28-1.3-.07.19 0 .4-.29.19a1.05 1.05 0 0 1-.13.14.71.71 0 0 1 0 .34c-.33.37-.75.16-1 .33-.13-.15.15-.19.14-.43l-.35.26c.13-.43-.21-.86.28-1l-.37-.14c-.14-.31-.43-.52-.68-.37-.16-.14-.58.38-.34.07l-.66.13v-.11c-.6-.16-1.29.53-1.9-.31a.79.79 0 0 1-.75.09l-.06-.39c-.26.12-.81-.36-.91 0-.35-1.05-1.33-.12-1.81-.23l.07.5a1.64 1.64 0 0 0-.93.52l.13.43c-.22.42-.89-.11-1.39.12 0-.17.12-.17.24-.1-.45-.38-.74-.11-1 .23s-.39.68-.81.47c-.06.2-.17.21-.31.15h-.05a2.9 2.9 0 0 0-.29-.12 1 1 0 0 0 .26.13 1 1 0 0 0-.3.37l-.3-.39c-.23-.07 0 .26.25.53a1 1 0 0 0 0 .35c-.52-.61-.21.44-.8-.16.13.4-.51.71-.05 1.44-.07-.08-.14-.1-.08-.16-.19 0-.39.07-.35.35l-.45-.42q.11.44.25.86c-.42-.14-.64-.21-.78-.73.08.93-.15.53 0 1.36l-.27-.29c-.12.13.1.68-.2.54-.83-.19-1.26 1.35-2.28 1.95 1.14.35-.7.19.12.62-.27-.06-.47 0-.63-.24.05.6-.73.61-.12 1.21-.28 0-.35-.24-.52-.24 0 .06.18.24 0 .25s-.2-.15-.29-.27c-.12.58.69.85 1.45 1.09-.43.15-.43.3.06.58-.27 0-.56.13-.6-.21-.07.16-.57 1.05.07 1.14-.17 0-.06.24 0 .3a2.25 2.25 0 0 0-.08.82l.11-.11c.76.16.17.31.28.62h-.08c-.5.75.25.27-.28 1l.47-.1c1-.1-.51.7 0 1l.23-.2c.39.11-1.19.94-1.24 1.25-.07.08-.16 0-.25-.1-.39.82.62-.1.9.3-.29.2-.86.18-.79.51-.17.28 1.34.47 1 1.1.19-.21.38-.4.65-.3s-.44 1.28.44 1.09a.42.42 0 0 1-.14.16c.32.09.74.48 1.19.3-.59.59-.17.78.21.9s.78.15.24.7c.2.16.39.33.6.46l-.12.1c.31.39.68.22 1 0 0 .15-.13.21-.18.27.36.67.51.65 1.37.33l-.21.46c.27-.2.5 1.21 1.4 1a.45.45 0 0 1-.16.17c.48-.11.76.4 1.1.7s.67.46 1-.37l.59-.32c-.57-.28.28-.74.11-1.09.24-.05.46.67.16.69v-.1c-.32.89.67.5.55 1.11a21.69 21.69 0 0 0 3.72.65l-.2-.72h.41c.13.15.21.55-.09.56.21.39.46-.41.44-.57.62.21-.11.88.07.87l.24-.09-.07-.08c.16-.33.12-.63.48-.66s.2.42.3.42 0 .07.14 0l.54-.06-.35-.51c.16-.33.48-.08.09-.66.61.92 1.93-.25 2.23-.07a1 1 0 0 1 .77-.78c-.14-.06-.49-.61-.18-.69.55 1.23.82.22 1.57.86-.56-.39.74-.69-.12-1.21.29-.07.31.4.68.52.12-.43.46-.6.85-.77a2.43 2.43 0 0 0 1.05-.76c-.12-.13-.41-.2-.49-.51q.47.12 1 .22c0-.2-.69-.76 0-.62-.15-.05-.36-.14-.34-.26a2.43 2.43 0 0 0 .94-.89 8.48 8.48 0 0 0 .51-1.2 4.26 4.26 0 0 1 1.5-2.35c-.38.18-.38 0-.36-.17-.1.1-.43-.08-.67-.1.26-.19.52-.4.77-.62-.65-.2 0-.8-.63-.9l.1.23c-.73-.31-1.68.29-2.63.14.42.17.08.31-.22.45s-.54.27 0 .6c-.21 0-.28-.14-.51-.14.38.18.42.33.18.5l-.09-.05a.91.91 0 0 1-.38.68l-.72.55.44.17c-.13.1-.27.06-.41.06.55.5.23-.35.86.15-.48-.13-.6.11-.75.32s-.34.4-.81.13c-.13.18.48.27.35.45l-.28-.13.27.28c-.15.08-.49-.09-.68-.25v-.16c-.39-.08-.23.47-.36.45h.27c-.07.33-.37.53-.59.79a1.51 1.51 0 0 0-.55.91l.17.15c-.18.61-.46 0-.8.46v-.06c0 .24-.05.41-.2.46 0-.29-.46-.33-.45-.67-.24.64-.05.43 0 1.33l-.23-.3c0 .36.08.52-.15.73.09-.39-.37-.45-.3-.95-.78-.55-.53 1-1.12 0 0 1.07.63.39.55.65.23.28 0 .8-.2.77s-.66-1.19-1.07-1.08c0 0 0-.08.07-.09-.21-.22-.25.43-.52 0 0 .63-.26 0-.19.79l.4-.24c-.19.23-.32 1.19-.79.8a1.75 1.75 0 0 1 .19-.52c-.14-.22-.21.19-.35 0 0-.77.5-.24.66-.86-.16-.32-.38.63-.37-.24-.06 1.12-.42-.09-.66.75v-.47c0 .08-.13.31-.22.3l.13-.62c-.22.53-.45-.43-.66-.16.45 0 .1.58.3.93-.63.62-.32-1.26-.94-1 .09-.06.3.3.15.51a.93.93 0 0 1-.3-.56c-.42 0 0 .49-.2.76-.07-.59-.24.2-.47.36l.08-.48c-.44-.37-.31 1-.7.51l.33-.61-.26.12.17-.52c-.33.34-.39.22-.58 0 0 .35-.27.83-.5.77-.06-.32.22-.41-.11-.45.17-.26.35-.6.34-.13.06-.15.15-.27.21-.41 0-.36-.34-.19-.44-.22a.19.19 0 0 1 .07.14c-.21.16-.43.34-.65.48a.59.59 0 0 1 .21-.42c-.1 0-.24.19-.38.18.18-.35.34-.72.56-.82l-.53.24c0-.17 0-.51.12-.62-.09-.27-.81.43-.93 0a.37.37 0 0 1-.2.12c-.19-.24-.11-.76-.69-.51l.29-.67c-.29 0-.35.86-.86.79s.3-.53.34-.75c-.35.19-1 .5-.84-.1.31.07.24.19.31.22zm-2-2.43c.12 0 .45 0 .2.16-.53.16-.31 0-.2-.16zm-1.33-5c.14.1 0 .15-.16.19-.02-.11.01-.18.16-.23zm13.94-9.45c-.17-.26-.12-.17 0-.04zm.36.34a.23.23 0 0 0 .03-.25c-.07.11-.16.08-.26 0 .04.17.06.27.26.21zm-1.55 23.21l-.11-.11c.14-.22.12-.08.1.07z"/>
			<path d="M136.14 153.08h-.26a.3.3 0 0 0 .26 0zm4.59 7.7h.01l.05-.06-.06.06zm3.17-14.09a.6.6 0 0 1-.16-.23c.02.12.06.22.16.23zm8.58-3.29h-.32c.14 0 .13.17.16.27.05-.14.08-.31.16-.27zm.32 3.76h.13l.13-.18c-.13-.07-.32.02-.26.18zm-.85-2.23c-.18.37 0 .32.23.35.31-.48.03-.42-.23-.35zm.27.36a.22.22 0 0 1 .15.08c.14-.18-.03-.09-.15-.08zm-1.64-2.16c.05.13.24-.47.23-.29.29-.45-.81.38-.23.29zm.84 3.03l.19-.46-.28.31.09.15zm-1.04-.92l.19.24a.2.2 0 0 1 .14-.13c-.14-.08-.27-.25-.33-.11zm.34.11a.21.21 0 0 0 .24 0 .44.44 0 0 0-.24 0zm.31.77l-.02-.13-.15-.12.17.25zm-3.46-1.8l-.32.1c-.05.17 0 .28.13.23s.21-.16.19-.33zm.57 1.52a1.14 1.14 0 0 1 0-.4l-.15.6zm-.79-.02c-.06.17-.45.44-.12.44.05-.17.34-.26.12-.44zm-4.13-.75h.07l-.19-1zm-2.34 3.42c.35.09-.25-.58.11-.43-.05-.25-.3-.12-.34-.34-.02.28-.16.22.23.77zm-.22-.77a1.19 1.19 0 0 0 0-.18.5.5 0 0 0 0 .18zm18.38 7.75l.23-.27-.35.17.12.1zm-.72-.55l.65-.05-.58-.17c.02.06.07.18-.07.22zm-20.25 1.59h-.15c-.15.07-.16.11-.16.19zm.49 1.98l-.01-.04-.44.41.45-.37zm1.71.73c0-.06-.18 0-.22-.07.19 0-.23.64.22.07z"/>
		  </g>
		  <ellipse cx="141.05" cy="155.12" fill="#414042" rx="2.68" ry="2.4"/>
		  <ellipse cx="140.85" cy="154.94" fill="#fff" rx="2.5" ry="2.22"/>
		  <circle cx="140.85" cy="154.94" r="1.05" fill="#414042"/>
		  <ellipse cx="150.38" cy="155.12" fill="#414042" rx="2.68" ry="2.4"/>
		  <ellipse cx="150.51" cy="154.94" fill="#fff" rx="2.5" ry="2.22"/>
		  <circle cx="150.55" cy="154.94" r="1.05" fill="#414042"/>
		  <path fill="#fff" d="M143.65 162.96l1.06-2.48h-2.12l1.06 2.48zm2.35-2.48l1.06 2.48 1.06-2.48H146z"/>
		  <path fill="none" stroke="#414042" stroke-miterlimit="10" d="M141.44 159.4a1 1 0 0 0 .91 1.08h6a1.17 1.17 0 0 0 .7-1.08"/>
		  <path fill="#414042" d="M145.26 155.59c-4 0-7.91-2.17-7.74-3.41.13-1 2.93-1.39 5.53-1.77a17.89 17.89 0 0 1 5.88 0c1.65.31 4.08.77 4.2 1.72.16 1.29-3.84 3.47-7.87 3.46z"/>
		  <path fill="#535454" d="M152.9 152.49a1 1 0 0 0 .23-.67.6.6 0 0 0 0-.11c.1-1.79-1.72-4.55-3.89-4.71a4.36 4.36 0 0 0-4 2.88c-.66 0-1.39.1-2.2.21-2.59.37-5.39.78-5.53 1.77-.17 1.23 3.77 3.07 7.74 3.08a12.91 12.91 0 0 0 6.42-1.41 2.43 2.43 0 0 0 1.23-1.04z"/>
		  <path fill="#212121" d="M142 150.85c.29.08.57.16.86.22s.57.13.87.18a9.86 9.86 0 0 0 1.75.17 7.79 7.79 0 0 0 .88 0c.29 0 .58-.07.87-.12s.58-.11.86-.18.57-.15.85-.24a8.88 8.88 0 0 1-3.47.71 9.13 9.13 0 0 1-1.79-.21 11.28 11.28 0 0 1-1.69-.5z"/>
		  <path fill="#212121" d="M139.58 151.44c.44.16.89.32 1.34.44s.89.26 1.35.36a11.92 11.92 0 0 0 2.72.34 9.33 9.33 0 0 0 1.37-.06c.46 0 .9-.15 1.36-.23a12.33 12.33 0 0 0 1.34-.37 12.65 12.65 0 0 0 1.32-.48 11.24 11.24 0 0 1-2.61 1.06 10.43 10.43 0 0 1-2.79.37 11.09 11.09 0 0 1-2.79-.42 14.64 14.64 0 0 1-2.63-1z"/>
		  <ellipse cx="145.45" cy="157.16" fill="#414042" rx="1.29" ry=".81"/>
		</g>
		<g id="ear-left">
		  <path fill="#535454" d="M133.33 152.07c1.21.27-2.18.37-5.12-5.49s-2.61-15.43-2.61-15.43 9.61 7.82 12.22 8.59a5.48 5.48 0 0 1 3.92 5 6.15 6.15 0 0 1-2.29 5.18c-4.18 3.52-7.33 1.88-6.12 2.15z"/>
		  <path fill="url(#linear-gradient-6)" d="M137.89 148a5.48 5.48 0 0 0-2.68-5.8c-1.89-1.06-7.12-7.52-9.15-10.08 0 2.59.25 9.72 2.62 14.44 1.91 3.81 4 5.1 4.92 5.46-.26 0 .35.27 1.51.16a6.18 6.18 0 0 0 2.78-4.18z"/>
		</g>
		<g id="ear-right">
		  <path fill="#535454" d="M157 152.56c-1.2.27 2.14.37 5-5.49s2.57-15.43 2.57-15.43-9.46 7.82-12 8.59a5.47 5.47 0 0 0-3.86 5 6.19 6.19 0 0 0 2.25 5.18c4.11 3.53 7.2 1.89 6.04 2.15z"/>
		  <path fill="url(#linear-gradient-7)" d="M152.49 148.51a5.52 5.52 0 0 1 2.64-5.8c1.86-1.06 7-7.52 9-10.08 0 2.59-.25 9.72-2.58 14.44-1.88 3.81-3.95 5.1-4.84 5.46.26 0-.34.27-1.48.16a6.19 6.19 0 0 1-2.74-4.18z"/>
		</g>
		<g id="wing-flaps" fill="#535454" stroke="#fff" stroke-miterlimit="10">
			<path id="flap-4" d="M124.23 107.42a102.74 102.74 0 0 0-10.34 18.13 65.12 65.12 0 0 0-4.89 18.83l-.24 2.41c-.12.8 0 1.62-.09 2.43s-.08 1.62-.08 2.44.08 1.63.08 2.45v1.23l.11 1.23c.08.82.12 1.65.18 2.47l.32 2.48.14 1.25.22 1.24c.48 3.34 1.26 6.68 2.09 10.08s1.88 6.8 3 10.35l-.48.33a65.19 65.19 0 0 1-9.06-19.52l-.37-1.3-.3-1.32-.58-2.64-.42-2.68-.21-1.34-.11-1.35-.22-2.7v-4.71l.05-.68.22-2.71a52.9 52.9 0 0 1 6.64-20.51 57.47 57.47 0 0 1 6.23-8.84 60 60 0 0 1 7.81-7.45z"/>
			<path id="flap-3" d="M99.13 97.88a123.35 123.35 0 0 0-12.42 21.77 78.18 78.18 0 0 0-5.9 22.61l-.29 2.89c-.15 1 0 1.94-.11 2.91s-.1 1.95-.09 2.92.09 2 .1 2.94v1.48l.14 1.47c.1 1 .15 2 .22 3l.39 3 .17 1.5.26 1.49c.57 4 1.51 8 2.51 12.1s2.25 8.16 3.55 12.43l-.58.4a78.27 78.27 0 0 1-10.88-23.44l-.45-1.56-.36-1.59-.7-3.17-.5-3.21-.19-1.67-.13-1.62-.26-3.25c-.05-1.08 0-2.17 0-3.26v-2.44l.07-.81.27-3.25a63.52 63.52 0 0 1 8-24.62 69 69 0 0 1 7.48-10.61 72 72 0 0 1 9.38-8.95z"/>
			<path id="flap-2" d="M181 181.57a102.74 102.74 0 0 0 4.17-20.45 65.12 65.12 0 0 0-1.2-19.42l-.52-2.36c-.13-.8-.47-1.55-.67-2.33s-.43-1.57-.69-2.34-.58-1.52-.84-2.3l-.4-1.16-.49-1.13c-.33-.75-.63-1.53-.94-2.29l-1.08-2.25-.52-1.15-.59-1.11c-1.5-3-3.28-6-5.13-8.92s-3.9-5.87-6-8.91l.35-.46a65.19 65.19 0 0 1 14.7 15.72l.76 1.12.69 1.16 1.38 2.33 1.23 2.41.61 1.21.53 1.25 1.05 2.5c.32.84.58 1.71.87 2.57l.43 1.29.21.64.16.66.63 2.64a52.9 52.9 0 0 1 .09 21.55 57.47 57.47 0 0 1-3.16 10.34 60 60 0 0 1-5.1 9.52z"/>
          	<path id="flap-1" d="M207 189.23a123.35 123.35 0 0 0 5-24.56 78.18 78.18 0 0 0-1.44-23.32l-.63-2.84c-.16-1-.56-1.86-.8-2.8s-.51-1.88-.82-2.81-.7-1.83-1-2.76l-.48-1.4-.59-1.36c-.4-.9-.76-1.83-1.13-2.75l-1.29-2.7-.63-1.38-.71-1.33c-1.8-3.63-3.94-7.15-6.16-10.71s-4.69-7-7.25-10.7l.43-.56a78.27 78.27 0 0 1 17.65 18.88l.91 1.34.83 1.4 1.66 2.8 1.48 2.9.74 1.45.63 1.5 1.26 3c.39 1 .7 2.06 1 3.08l.51 1.55.26.77.19.79.76 3.17a63.52 63.52 0 0 1 .11 25.88 69 69 0 0 1-3.8 12.42 72 72 0 0 1-6.12 11.43z"/>
		</g>
	  </g>
	  <g id="smoke"></g>
	</svg>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Metal+Mania');

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Catamaran', sans-serif;
}

body
{
	background-color: #E2DEE4;
	font-family: 'Metal Mania', cursive;
	font-size: 1.3rem;
	
}

.info
{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	text-align: center;
	color: #B33951;
	//width: 100%;
}

#container
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	display: flex;
	flex-direction: col;
	justify-content: space-around;
	align-items: center;
}

svg
{
	width: 100%;
	height: 450px;
	z-index: 10;
	-webkit-backface-visibility: hidden;
}

#vampire
{
	opacity: 0;
}

#transform-lines
{
	opacity: 0;
	stroke-linecap: round;
}

#smoke
{
	//display: none;
}

#wing-flaps
{
	opacity: 0;
}
            
          
!
            
              console.clear();

const STATES = {
	bat: 'BAT',
	vampire: 'VAMPIRE'
}

let blinkTimeout;
let wiggleTimeout;

let state = STATES.bat;
let transformColors = ['#684756', '#1A1423', '#222222', '#555555']; //, '#890620'
let smokeColorsDark = ['#333', '#444', '#555','#ccc', '#bbb', '#ddd']; //, '#890620'
let smokeColors = ['#ccc', '#bbb', '#ddd']; //, '#890620'

let SVG = document.getElementById('svg');

//=================
// SETUP
//=================

let transformLength = 100;

// Snap.svg isn't really necessary for this.
// I had bigger plans originally then forgot
// to remove it.

let bat = Snap.select('#bat');
let wingLeft = Snap.select('#wing-left');
let wingRight = Snap.select('#wing-right');
let wingFlaps = Snap.select('#wing-flaps');
let vampire = Snap.select('#vampire');
let lines = Snap.select('#transform-lines');
let head = Snap.select('#head');
let arm = Snap.select('#arm');
let cloak = Snap.select('#cloak');
let cloakMaterial = Snap.select('#material');
let cloakBack = Snap.select('#cloak-back');
let collar = Snap.select('#collar');
let brow = Snap.select('#brow');
let mouth = Snap.select('#mouth');
let shadow = Snap.select('#shadow');
let fingers = [];
for(let i = 1; i <= 4; i++) fingers.push(Snap.select('#finger-' + i));
let eyes = { 
		left: { 
			white: Snap.select('#left-eye-white'),
			pupil: Snap.select('#left-eye-pupil')
		},
		right: { 
			white: Snap.select('#right-eye-white'),
			pupil: Snap.select('#right-eye-pupil')
		}
	}

let smokeContainer = Snap.select('#smoke');
let smokes = [];
for(let i = 0; i < 3; i++)
{
	let smoke = Snap.select('#smoke-' + i);
	
	for(let j = 0; j < 6; j++)
	{
		let s = smoke.clone().appendTo(smokeContainer);
		TweenMax.set(s.node, {transformOrigin: (Math.random() * 100) + '% ' + (Math.random() * 100) + '%', css: {x: 110 + Math.random() * 30, opacity: 0, fill: smokeColors[Math.floor(Math.random() * smokeColors.length)]}}) //rotation: Math.random() * 180, 
		smokes.push(s);
	}
}

let transformLines = [];
for(let i = 0; i < 10; i++)
{
	let line = Snap.select('#line-' + i);
	transformLines.push(line);
	TweenMax.set(line.node, {css: {strokeWidth: 20, stroke: transformColors[Math.floor(Math.random() * transformColors.length)], strokeDasharray: transformLength + ' ' + line.getTotalLength(), strokeDashoffset: transformLength}})
}

TweenMax.set(bat.node, {y: -60, transformOrigin: '50% 50%'});
TweenMax.set(wingLeft.node, {transformOrigin: '100% 90%', scaleY:1, scaleX:0.2,});
TweenMax.set(wingRight.node, {transformOrigin: '0% 90%', scaleY:1, scaleX:0.2,});
TweenMax.set(wingFlaps.node, {y: '+=30'});
TweenMax.set(vampire.node, {css: {opacity: 0, transformOrigin: '35% 100%'}});
TweenMax.set(lines.node, {y: '+=20', opacity: 0.8});
TweenMax.set(head.node, {y: '+=50'});
TweenMax.set(arm.node, {css: {transformOrigin: '10% 70%'}});
TweenMax.set(cloak.node, {css: {transformOrigin: '0% 0%'}});
TweenMax.set(cloakMaterial.node, {x: 90, y: 75});
TweenMax.set(cloakBack.node, {css: {transformOrigin: '50% -20%'}});
TweenMax.set(collar.node, {css: {transformOrigin: '50% 50%'}});
TweenMax.set(shadow.node, {css: {x: 145, y: 265, opacity: 0.3, transformOrigin: '50% 50%'}});

//=================
// Bat Loop
//=================

let flapSpeed = 0.4;

let batLoop = new TimelineMax({onComplete: d => 
{
	if(state == STATES.bat)
	{
		batLoop.play(0)
	}
	else
	{
		toVampire.play(0);
	}
}})

batLoop.set(bat.node, {opacity: 1})

batLoop.add(TweenMax.to(bat.node, flapSpeed/2, {y: "+=20", ease:Power1.easeInOut}), 0);
batLoop.add(TweenMax.to(bat.node, flapSpeed/2, {y: "-=20", ease:Power1.easeInOut}), flapSpeed/2);

batLoop.add(TweenMax.to(wingFlaps.node, flapSpeed/4, {opacity: "0.5", ease:Power4.easeIn}), 0);
batLoop.add(TweenMax.to(wingFlaps.node, flapSpeed/4, {opacity: "0", ease:Power4.easeOut}), flapSpeed/4);

batLoop.add(TweenMax.to(wingLeft.node, flapSpeed/2, {rotation: "-100deg", scale:1, ease:Power1.easeInOut}), 0);
batLoop.add(TweenMax.to(wingLeft.node, flapSpeed/2, {rotation: "0deg", scaleY:1, scaleX:0.2, ease:Power1.easeInOut}), flapSpeed/2);

batLoop.add(TweenMax.to(wingRight.node, flapSpeed/2, {rotation: "100deg", scale:1, ease:Power1.easeInOut}), 0);
batLoop.add(TweenMax.to(wingRight.node, flapSpeed/2, {rotation: "0deg", scaleY:1, scaleX:0.2, ease:Power1.easeInOut}), flapSpeed/2);

batLoop.set(shadow.node, { scale: 0.5, opacity: 0.1}, 0)
batLoop.to(shadow.node, flapSpeed/2, {scale: 0.48, opacity: 0.09, ease:Power1.easeInOut}, 0);
batLoop.to(shadow.node, flapSpeed/2, {scale: 0.5, opacity: 0.1, ease:Power1.easeInOut}, flapSpeed/2);

//=================
// Bat To Vampire
//=================

let toVampire = new TimelineMax({onComplete: () => { blink(); wiggleFingers();}})
let batSpeed = 0.3;

for(let i = 0; i < 10; i++)
{
	let duration = 2.5;
	let delay = batSpeed * (1.5 + (Math.random() / 2));
	toVampire.fromTo(transformLines[i].node, duration, {css: {strokeWidth: 1}}, {css: {strokeWidth: 1, strokeDashoffset: -transformLines[i].getTotalLength()}, ease: Power4.easeOut}, delay);
	toVampire.fromTo(transformLines[i].node, duration / 3, {css: {opacity: 0}}, {css: {opacity: 1}, ease: Power4.easeIn}, delay);
	toVampire.to(transformLines[i].node, (duration / 3) * 2, {css: {opacity: 0}, ease: Power4.easeOut}, delay + duration / 3);
}

for(let i = 0; i < smokes.length; i++)
{
	let delay = (batSpeed * 2) + Math.random() / 5;
	toVampire.set(smokes[i].node, {opacity: 0.5 + Math.random() * 0.5, scale: 0.35 + Math.random(), y: 80 + (delay * 10), fill: smokeColorsDark[Math.floor(Math.random() * smokeColorsDark.length)]}, delay)
	toVampire.to(smokes[i].node, batSpeed * 4, {y: 250, scale:2.5, rotation: -180 + Math.random() * 360, opacity: 0, ease:Power3.easeOut}, delay);
}

toVampire.to(shadow.node, batSpeed*1.5, {scale: 0.3, opacity: 0.05, ease:Power1.easeOut}, 0);

toVampire.to('.info', 0.3, {opacity: 0}, 0)
toVampire.to(bat.node, batSpeed, {y: -130, rotation: -10, ease:Power1.easeOut}, 0);
toVampire.to(wingLeft.node,  batSpeed * 0.8, {rotation: "-50deg", scale:1, ease:Power2.easeOut}, 0);
toVampire.to(wingRight.node,  batSpeed * 0.8, {rotation: "50deg", scale:1, ease:Power2.easeOut}, 0);

toVampire.to(bat.node, batSpeed * 1.5, {y: 40, rotation: 0, x: "-=10", scaleY: 2, ease:Power1.easeIn}, batSpeed);
toVampire.to(wingLeft.node, batSpeed * 1.2, {rotation: "0deg", scaleY:0.6, scaleX:0.2, ease:Power4.easeIn}, batSpeed);
toVampire.to(wingRight.node, batSpeed * 1.2, {rotation: "0deg", scaleY:0.6, scaleX:0.2, ease:Power4.easeIn}, batSpeed);

toVampire.set(vampire.node, { y: -150, rotation: 10, scaleX: 0.4, scaleY: 0.1}, batSpeed * 2.3);
toVampire.set(bat.node, {opacity: 0}, batSpeed * 2.3);

toVampire.to(shadow.node, 0.3, {scale: 0.9, opacity: 0.3, ease:Power3.easeIn}, batSpeed * 1.5);
toVampire.to(vampire.node, 0.2, {opacity: 1, rotation:0, scale: 1, y:0, ease: Linear.ease}, batSpeed * 2.3 + 0.01)
toVampire.fromTo(head.node, 0.4, {y: -60}, {y: 40, x: 5, ease: Power4.easeOut}, batSpeed * 2.3 )
toVampire.to(head.node, 1, {y: 0, x: 0, ease: Power2.easeInOut}, batSpeed * 2.4 + 0.6 )

toVampire.fromTo(arm.node, 0.4,{rotation: 80}, {rotation: 0, ease: Power4.easeOut}, batSpeed * 2.3 )
toVampire.to(arm.node, 1, {rotation: 80, ease: Power2.easeInOut}, batSpeed * 2.3 + 0.5 )

toVampire.fromTo(cloak.node, 2.5, {rotation: -10}, {rotation: 0, ease: Elastic.easeOut}, batSpeed * 2.3 )
toVampire.fromTo(cloak.node, 0.2, {y:0, scaleY: 0.6, scaleX: 1, x: -5}, {y: 0, x: 0, scale: 1, ease: Linear.ease}, batSpeed * 2.3)

toVampire.fromTo(cloakBack.node, 2,{rotation: -10}, {rotation: 0, ease: Elastic.easeOut}, batSpeed * 2.3 )
toVampire.fromTo(cloakBack.node, 0.5,{y:-20, x: -20}, {y: 0, x: 0, ease: Power2.easeOut}, batSpeed * 2.3 )

toVampire.fromTo(collar.node, 0.4,{scaleY: 1, y: -10}, {y: 20, scale: 1, ease: Power1.easeOut}, batSpeed * 2.3 )
toVampire.to(collar.node, 1, {y: 0, ease: Power2.easeInOut}, batSpeed * 2.3 + 0.6 )
toVampire.fromTo(brow.node, 2.2, {y: 5}, {y: 0, ease: Power2.easeInOut}, batSpeed * 2.3 )
toVampire.fromTo(mouth.node, 2, {scaleY: 0.2}, {scale: 1, ease: Power1.easeInOut}, batSpeed * 2.5 )

toVampire.pause();

//=================
// Vampire Loop
//=================

const blink = function()
{
	blinkTimeout = setTimeout(d => { if(state == STATES.vampire) vampireBlink.play(0) }, Math.random() * 5000);	
}

let vampireBlink = new TimelineMax({onComplete: blink})
let blinkSpeed = 0.3;

vampireBlink.set([eyes.left.white.node, eyes.right.white.node], {css:{fill: '#f3e8c3'}}, 0.1)
vampireBlink.set([eyes.left.white.node, eyes.right.white.node], {css:{fill: 'white'}}, blinkSpeed)

vampireBlink.set([eyes.left.pupil.node, eyes.right.pupil.node], {css:{opacity: 0}}, 0.1)
vampireBlink.set([eyes.left.pupil.node, eyes.right.pupil.node], {css:{opacity: 1}}, blinkSpeed)

vampireBlink.pause();

const wiggleFingers = function()
{
	wiggleTimeout = setTimeout(d => { if(state == STATES.vampire) vampireWiggle.play(0) }, Math.random() * 20000);	
}

let vampireWiggle = new TimelineMax({repeat:2, onComplete: wiggleFingers})

for(let i = 0; i < fingers.length; i++)
{
	vampireWiggle.to(fingers[i].node, 0.5, {rotation: 20}, i * 0.1)
	vampireWiggle.to(fingers[i].node, 0.5, {rotation: 0}, 0.5 + i * 0.1)
}

vampireWiggle.pause();

//=================
// Click toggle
//=================

document.addEventListener('click', () => 
{
	if(blinkTimeout) clearTimeout(blinkTimeout);
	if(wiggleTimeout) clearTimeout(wiggleTimeout);
	switch(state)
	{
		case STATES.bat:
			state = STATES.vampire;			
			break;
		case STATES.vampire:
			state = STATES.bat;
			batLoop.play(0);
			toVampire.time(0).pause();
			break;
	}
	
})
            
          
!
999px
Loading ..................

Console