Home CSS Perubahan Wujud Kelelawar menjadi Vampire dengan CSS

28 November 2023

Perubahan Wujud Kelelawar menjadi Vampire dengan CSS

Komentar
بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Perubahan Wujud Kelelawar menjadi Vampire dengan CSS
VAMPIRE Apa yang terbesit di benak kalian ketika mendengar kata - Vampire -. Seorang siluman dengan gigi taring tajam, penghisap darah dan memakai jubah serba hitam. Keluar mencari mangsa pada malam hari ketika gelap disinari temaram sinar rembulan purnama. Ya, kalian tidak salah.

Vampire berawal dari Vrykolakas di Yunani dan Strigoi di Rumania. Di kedua negara Eropa itu, Vampire menampakkan sebagai seseorang yang haus akan intisari tubuh seperti darah. Sudah sejak zaman kuno sekitar abad 18, istilah Vampire mulai dikenalkan ke publik di Eropa.

Baca Juga :



Ini dia cuplikan video Vampire :

@swpittx vampire part2 #castlevania #vampirehunterd #anime #vampire #animeedit #vampirehunterdedit #castlevanianetflix #fyp #viral #fypã‚· ♬ Smells Blood - kensuke ushio


Vampir umumnya diceritakan keluar dari makamnya pada malam hari untuk menggigit orang-orang dengan taringnya yang panjang dan mengisap darah mereka. Korban yang digigitnya biasanya akan menjadi vampir juga.

Menurut beberapa mitos, vampir tidak tampak di cermin karena mereka tidak memiliki jiwa. Dalam cerita fiksi modern, vampir bisa menjelma menjadi kelelawar, serigala, bahkan gumpalan gas, dan harus menjauhkan diri dari sinar matahari.

Vampire dalam antologi di berbagai negara :

1. Negara Serbia : вампир
2. Negara Turki : Ubır, Obur, Obır
3. Negara Tatar : Убыр / Ubır
4. Negara Chuvash : Вупăр / Vupăr
5. Negara Bosnia : вампир

Vampire dalam berbagai negara. Unik dan susah diucapin ya?

Baca Juga :



Vampire

 Vampire adalah makhluk mitos yang hidup dengan memakan esensi vital (umumnya dalam bentuk darah, red) makhluk hidup. Mereka mengenakan kain kafan dan sering digambarkan berbadan buncit serta berwajah kemerahan atau gelap, berbeda dengan vampir masa kini yang kurus dan pucat serta berasal dari awal abad 19.

Kelelawar -- Vampire

 Proses menjadi vampire berbeda-beda dalam beberapa kepercayaan. Di Slavia dan Cina, mayat yang dilangkahi oleh kucing atau anjing akan menjadi mayat hidup. Dalam kepercayaan Rusia, vampire adalah penyihir atau manusia yang semasa hidupnya menentang Gereja. Kalau dalam film-film yang beredar misal Transylvania, sosok Vampire akan berubah wujud menjadi seekor kelelawar atau sebaliknya dari vampire menjadi kelelawar.

Vampire dalam Berbagai Negara

 Vampire atau setan ternyata tidak hanya di Eropa. Di negara kita Indonesia setidaknya ada beberapa vampire atau setan. Sebut saja Pocong, Kunti, Suster Ngesot, Genderuwo, Leak, Gundul Pringis, Tuyul. Yang dari Indonesia ini tidak mengisap darah ya teman-teman, tapi menakuti dengan penampakan wajah seram.

Tapi ada juga yang menampakkan diri karena dipanggil dengan sajen untuk mendapatkan nomer jitu 4 angka. Semacam arena judi angka atau jaman dulu disebut SDSB. Wah, kalau yang ini sih sudah keterlaluan ya, setan fungsinya menakuti manusia, eh malah dimintai nomer untuk judi. Emang warga -- Konoha -- ya. :D

Kelelawar Berubah Wujud dengan CSS

 Hai hai hai .. sekarang kita mengulik tentang Kelelawar yang sudah kita bahas ya. Ya sebenarnya, vampire sih. Agak menarik memang mengangkat kisah vampire ini. Karena dalam film, kehidupan realita dan dalam bentuk animasi, Vampire masih menjadi primadona tontonan yang layak untuk menemani suasana santai di rumah.

Dalam tutorial kali ini saya akan mengaplikasikan kelelawar yang berubah menjadi vampire dan sebaliknya. Tidak lupa saya ucapkan terima kasih banyak kepada Steve Gardner seorang programmer Pro yang mempersembahkan karyanya ini. Saya ambil creditnya untuk saya buat tutorialnya. Jadi silakan disimak ya? :D

Ini dia tutorialnya :

Caranya adalah sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut
@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;
}


6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu
<div class="info">Klik untuk Berubah Menjadi 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>


10. Terakhir kalian harus menambahkan JS dibawah ini tepat diatas kode </body>. Letak kode </body> adalah di template blog kalian ya teman-teman.
<script type='text/javascript'> 
//<![CDATA[
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: -20}, {y: 15, x: 0, 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;
	}
	
})
//]]> 
</script>





Cerita tentang vampire kemudian menjadi bergairah tatkala dikemas dalam balutan film yang dibintangi oleh anak muda. Genre horror kian hari kian condong menuju kisah klasik percintaan anak muda antara manusia dan vampire. Dan film itu dikemas dalam judul -- Twilight --.

Kenapa film itu populer? Ya karena bintangnya adalah artis muda yang cantik dan tampan luar biasa. Sehingga genre horror vampire telah terkikis oleh petualangan dua sejoli dalam menjalin kasih diantara dunia yang berbeda. Dunia manusia dan dunia kegelapan antah berantah.

Kisah vampire yang semula horror menjadi kisah yang multi genre. Tidak sebatas kegelapan. Tapi sudah merambah ke animasi 3D. Misal film animasi Transylvania, seperti yang sudah saya sebutkan diatas ya. Film Hotel Transylvania mengangkat kisah tentang para vampire yang mengelola sebuah hotel. Dirilis tahun 2012 silam, Hotel Transylvania mengisahkan Mavis dari keluarga vampire yang mencintai manusia bernama Johnny.

Kalau dari China, kisah vampire malah dijadikan parodi yang unik. Vampire dengan pakaian khas China ini menjadi film yang sarat komedi. Pada film -- Vampire Ghost -- tahun 1984, menuai pujian dan applaus karena menampilkan sisi horror vampire dengan visualisasi lucu dan bikin ketawa. Jadi vampire sekarang sudah jinak kali ya :D

Oke. Sudah ya tutorial dan ceritanya. Selamat malam. Salam -- Hisap darah .. :P

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Perubahan Wujud Kelelawar menjadi Vampire dengan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )