For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat animasi HTML filosofi kopi diblogger

Hello sobat ICloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi filosofi kopi menggukan html diblogger

Info: Okay sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama ya

Dibuat Menggunakan HTML

Animasi filosofi kopi ini dibuat menggunakan kode HTML secara keseluruhan, mudah dalam penggunaan dan yang pasti gratis, nah pada Sebelum sebelumnya kan admin sudah pernah membahas mengenai beberapa Animasi diblogger yang dibuat menggunakan kode CSS namun untuk kali ini, animasi yang ditampilkan tersebut dibuat menggunakan kode HTML murni

Cara Pembuatan

Baiklah sekarang saatnya admin bakalan memberikan informasi mengenai bagaimana sih caranya membuat animasi HTML filosofi kopi diblogger, pelajari aja secara perlahan okay

Kode HTML

Langsung aja kamu bisa menyalin kode HTML dibawah ini, kemudian kamu bisa menggunakannya sesuai keperluan kamu aja okay

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						 width="400px" height="300px" viewBox="0 0 400 300" style="enable-background:new 0 0 400 300;" xml:space="preserve">
					<polygon style="fill:#DFDCE0;" points="287.2,239.5 104.2,239.5 99.2,98.5 292.2,98.5 "/>
					<g id="XMLID_1_">
						<g>
							<polygon style="fill:#AB8B82;" points="256.2,98.5 246.2,210.4 145.1,210.4 135.1,98.5 		"/>
						</g>
						<g>
						</g>
					</g>
					<g>
						<rect x="144.7" y="210.5" style="fill:#D3D0D5;" width="101.7" height="29.1"/>
						<rect x="163.2" y="210.5" style="opacity:0.5;fill:#DFDCE0;" width="65.1" height="29.1"/>
						<polygon style="opacity:0.1;fill:#5D5E5E;" points="216.3,141.7 170.8,141.7 169.3,119.2 217.8,119.2 	"/>
						<polygon style="opacity:0.1;fill:#5D5E5E;" points="215.2,119.2 161.8,119.2 156.7,107.4 220.3,107.4 	"/>
						<polygon style="fill:#D3D4D1;" points="201.7,142.7 189.9,142.7 189.6,139.4 202,139.4 	"/>
						<polygon style="opacity:0.1;fill:#5D5E5E;" points="201.7,142.7 189.9,142.7 189.6,139.4 202,139.4 	"/>
						<polygon style="fill:#D3D4D1;" points="218.5,139.4 173,139.4 171.5,110.4 220,110.4 	"/>
						<polygon style="opacity:8.000000e-002;fill:#5D5E5E;" points="219.7,116.2 220,110.4 171.5,110.4 171.8,116.2 	"/>
						<polygon style="opacity:0.1;fill:#5D5E5E;" points="255.6,107.4 256.3,98.6 135.2,98.6 135.9,107.4 	"/>
						<path style="fill:#BCBFBC;" d="M287.2,71.7c0,0-50-2.4-91.7-2.4s-91.3,2.4-91.3,2.4l-5,26.9H159l5,11.8h63.6l5-11.8h59.7
							L287.2,71.7z"/>
						<g>
							<circle style="opacity:0.1;fill:#5D5E5E;" cx="118.5" cy="86.3" r="5.3"/>
							<circle fill="#6BA491" cx="118.5" cy="85.6" r="5.3">
								<animate attributeName="fill" begin=".7s" dur="3s" from="#6BA491" to="#6BA491" values="#6BA491; #6BA491; #6BA491; #5D5E5E; #6BA491; #6BA491; #6BA491;" repeatCount="indefinite" />
							</circle>
							<g>
								<path style="fill:#DFDCE0;" d="M120.6,84c0-0.2-0.1-0.6-0.9-0.8c-0.5-0.2-1.1-0.2-1.7-0.2s-1.2,0.1-1.7,0.2
									c-0.7,0.2-0.9,0.6-0.9,0.8c0,1,0,1.8,0.2,2.4c0.2,0.6,0.4,1.1,1,1.5c0.3,0.3,0.8,0.5,1.4,0.5c0.6,0,1.1-0.2,1.4-0.5
									c0.4-0.4,0.6-0.7,0.8-1.2c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.3,0,0.7-0.1,0.9-0.4
									c0.2-0.2,0.4-0.6,0.4-0.9c0-0.3-0.1-0.6-0.4-0.9c-0.2-0.2-0.5-0.3-0.9-0.3c-0.1,0-0.2,0-0.3,0C120.6,84.2,120.6,84.1,120.6,84z
									 M121.9,85.4c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3c-0.1,0-0.2,0-0.3,0c-0.3,0-0.5,0-0.6,0.2c-0.2,0.4-0.4,0.8-0.8,1.1
									c-0.3,0.2-0.7,0.4-1.2,0.4s-0.9-0.1-1.2-0.4c-0.9-0.9-1.1-1.7-1.1-3.7c0-0.4,1-0.7,2.3-0.7c1.2,0,2.3,0.3,2.3,0.7
									c0,0.2,0,0.4,0,0.6c0,0,0,0,0,0c0.1,0,0.3-0.1,0.6-0.1c0.3,0,0.5,0.1,0.7,0.2C121.8,84.9,121.9,85.1,121.9,85.4z"/>
								<path style="fill:#DFDCE0;" d="M120.3,85.2c0,0.2-0.1,0.7-0.1,0.9c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.3,0,0.4,0c0,0,0,0,0.1,0
									c0.3,0,0.6-0.3,0.6-0.6c0-0.3-0.2-0.5-0.6-0.5C120.6,84.9,120.4,85,120.3,85.2z M120.8,85.8c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0
									c0-0.2,0-0.3,0.1-0.4c0.1-0.1,0.2-0.2,0.3-0.2c0.1,0,0.3,0,0.3,0.2C121.2,85.6,121,85.7,120.8,85.8
									C120.9,85.8,120.9,85.8,120.8,85.8z"/>
								<path style="fill:#DFDCE0;" d="M119.7,83.8C119.6,83.8,119.6,83.8,119.7,83.8c-0.1,0.1-0.1,0.1-0.1,0.1c0.1,0,0.1,0.1,0.1,0.1
									c0,0,0,0.1-0.1,0.1c-0.3-0.2-0.9-0.3-1.6-0.3s-1.3,0.1-1.6,0.3c-0.1-0.1-0.1-0.1-0.1-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0-0.1,0-0.1
									c0,0-0.1,0-0.1,0c-0.1,0.1-0.2,0.2-0.2,0.3c0,0.4,0.9,0.5,1.8,0.5c0.9,0,1.8-0.2,1.8-0.5C119.9,84,119.8,83.9,119.7,83.8z"/>
							</g>
						</g>
						<path style="fill:#20409A;" d="M195.8,60.3c-23.9,0-24.3,13.5-24.3,13.5H220C220,73.9,219.7,60.3,195.8,60.3z"/>
						<path style="opacity:0.1;fill:#5D5E5E;" d="M195.8,77.8c23.9,0,24.3-3.9,24.3-3.9h-48.6C171.5,73.9,171.9,77.8,195.8,77.8z"/>
						<polygon style="opacity:0.1;fill:#FFFFFF;" points="287.2,239.7 277.2,239.7 282.7,98.5 277.2,71.3 287.2,71.7 292.3,98.6 	"/>
						<g>
							<circle style="opacity:0.1;fill:#5D5E5E;" cx="274.3" cy="86.2" r="4.7"/>
							<circle style="fill:#20409A;" cx="274.3" cy="85.5" r="4.7"/>
							<g>
								<g>
									<path style="fill:none;stroke:#DFDCE0;stroke-width:0.369;stroke-miterlimit:10;" d="M272.4,84.6c-0.5,0.2-0.9,0.7-0.9,1.3
										c0,0.7,0.6,1.4,1.4,1.4c0.1,0,0.2,0,0.3,0c0.1,0.7,0.7,1.2,1.3,1.2c0.7,0,1.2-0.5,1.3-1.1c0.6-0.1,1.1-0.7,1.1-1.3
										c0-0.5-0.3-0.9-0.7-1.2"/>
									<path style="fill:none;stroke:#DFDCE0;stroke-width:0.369;stroke-miterlimit:10;" d="M273.9,86.7c-0.2,0.3-0.6,0.4-1,0.4"/>
								</g>
								<g>
									<line style="fill:none;stroke:#DFDCE0;stroke-width:0.369;stroke-miterlimit:10;" x1="272.9" y1="85.8" x2="273.4" y2="83"/>
									<line style="fill:none;stroke:#DFDCE0;stroke-width:0.369;stroke-miterlimit:10;" x1="274.2" y1="85.8" x2="274.2" y2="83"/>
									<line style="fill:none;stroke:#DFDCE0;stroke-width:0.369;stroke-miterlimit:10;" x1="275" y1="83" x2="275.5" y2="85.8"/>
								</g>
							</g>
						</g>
						<g style="opacity:0.4;">
							<path style="fill:#FFFFFF;" d="M130.7,228.1c0,1.9-1.6,3.5-3.5,3.5h-6.1c-1.9,0-3.5-1.6-3.5-3.5V222c0-1.9,1.6-3.5,3.5-3.5h6.1
								c1.9,0,3.5,1.6,3.5,3.5V228.1z"/>
						</g>
						<g>
							
								<circle style="fill:none;stroke:#20409A;stroke-width:0.3105;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="124.2" cy="225.1" r="3"/>
							
								<line style="fill:none;stroke:#20409A;stroke-width:0.3105;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="124.2" y1="223" x2="124.2" y2="227.1"/>
						</g>
						
							<ellipse transform="matrix(0.9389 -0.3443 0.3443 0.9389 -47.2704 113.9604)" style="fill:#5D5E5E;" cx="297.3" cy="190.1" rx="3.7" ry="1.1"/>
						
							<ellipse transform="matrix(0.9389 -0.3443 0.3443 0.9389 -47.189 113.9129)" style="fill:#ACA7B3;" cx="297.2" cy="189.8" rx="3.1" ry="0.6"/>
						<path style="fill:#ACA7B3;" d="M300.1,188.8l-25.2-68.6c0,0-0.3-1.1-1.9-1.2l0,0l-6.5-0.5l-0.4,5.5l3.8,0.3l24.4,66.5L300.1,188.8z
							"/>
						<path style="opacity:0.05;fill:#5D5E5E;" d="M280.3,224c0-0.3-0.3-0.5-0.7-0.6l-14-92.2l4.3-6.8l-3.9-0.3l-2.3-3.1
							l-3.5,6.4l0,0c-1.3,1.2-1,2.6-1,2.6l14.5,95.1c-0.3,0.3-0.5,0.6-0.5,0.9c0.1,0.8,1.8,1,3.8,0.5C279,225.9,280.5,224.8,280.3,224z"
							/>
						<path style="fill:#FFFFFF;" d="M286.5,137.9c0.8-0.3,1.3-1.2,1-2l-2.1-6c-0.3-0.8-1.2-1.3-2-1l-1.5,0.5c-0.8,0.3-1.7-0.2-2-1
							l-0.2-0.4c-0.3-0.8-1.2-1.3-2-1l-5.7,2c-0.8,0.3-1.3,1.2-1,2l4.1,11.9c0.3,0.8,1.2,1.3,2,1l5.7-2c0.8-0.3,1.3-1.1,1.1-1.7
							c-0.2-0.7,0.3-1.4,1.1-1.7L286.5,137.9z"/>
						<circle style="fill:#ACA7B3;" cx="266.4" cy="121.3" r="2.8"/>
						<circle style="fill:#20409A;" cx="196" cy="225.6" r="10.5"/>
						<circle style="opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:0.1702;stroke-miterlimit:10;" cx="196" cy="225.6" r="8.6"/>
						<g style="opacity:0.5;">
							<path style="fill:#DFDCE0;" d="M195.7,221.9c0-0.2-0.1-0.3-0.1-0.5c-0.2,0-0.4,0-0.5,0c0,0,0,0,0,0c0,0.1,0,0.2-0.1,0.4
								c0,0,0,0,0,0c-0.2,0-0.5,0-0.7,0c0-0.1,0.1-0.3,0.1-0.4c0.2-0.7,0.3-1.5,0.5-2.2c0-0.1,0-0.1,0.1-0.1c0.3,0,0.6,0,0.8,0
								c0,0,0.1,0,0.1,0c0.2,0.9,0.4,1.8,0.6,2.7C196.2,221.9,196,221.9,195.7,221.9z M195.4,219.9C195.4,219.9,195.3,219.9,195.4,219.9
								c-0.1,0.3-0.1,0.6-0.2,1c0.1,0,0.3,0,0.4,0C195.5,220.5,195.4,220.2,195.4,219.9z"/>
							<path style="fill:#DFDCE0;" d="M197.5,220c0,0.4-0.1,0.9-0.1,1.3c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.1,0.1c0,0.2,0.1,0.3,0.1,0.5
								c-0.4,0-0.8,0-1.2,0c0-0.4,0.1-0.8,0.1-1.3c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1-0.1c0-0.2-0.1-0.3-0.1-0.5c0,0,0,0,0,0
								C196.7,220,197.1,220,197.5,220z"/>
							<path style="fill:#DFDCE0;" d="M197.9,221.9c0-0.4,0.1-0.8,0.1-1.3c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0c0-0.2-0.1-0.4-0.1-0.6
								c0,0,0,0,0,0c0.4,0,0.8,0,1.2,0c0,0.4-0.1,0.9-0.1,1.3c0.1,0,0.2,0,0.3,0c0,0,0.1,0,0.1,0.1c0,0.2,0.1,0.3,0.1,0.5
								C198.7,221.9,198.3,221.9,197.9,221.9z"/>
							<path style="fill:#DFDCE0;" d="M193.8,221.3c0.1,0,0.3,0,0.4,0c0,0.2-0.1,0.4-0.1,0.6c-0.4,0-0.7,0-1.1,0c0-0.2,0.1-0.3,0.1-0.4
								c0.1-0.5,0.2-0.9,0.3-1.4c0-0.1,0-0.1,0.1-0.1c0.2,0,0.3,0,0.5,0c0,0,0,0,0.1,0C194,220.4,193.9,220.9,193.8,221.3z"/>
						</g>
						<g>
							<path style="fill:#ACA7B3;" d="M197.9,141.4c0-0.2-1-0.4-2.2-0.4c-1.2,0-2.2,0.2-2.2,0.4c0,0,0,3.8,0,3.8c0,0.2,1,0.4,2.2,0.4
								c1.2,0,2.2-0.2,2.2-0.4C197.9,145.2,197.9,141.4,197.9,141.4z"/>
							<ellipse style="opacity:0.5;fill:#5D5E5E;" cx="195.7" cy="145.1" rx="1.6" ry="0.3"/>
						</g>
						<g>
							<polygon style="opacity:0.1;fill:#5D5E5E;" points="169.3,167.1 169.3,169 170.1,169 175,208.7 207.2,208.7 212.1,169 212.9,169 
								212.9,167.1 		"/>
							<polygon style="fill:#FFFFFF;" points="173.9,167.1 173.9,169 174.7,169 179.7,208.7 211.9,208.7 216.8,169 217.6,169 
								217.6,167.1 		"/>
							<polygon style="opacity:0.1;fill:#5D5E5E;" points="174.8,169.8 216.7,169.8 216.8,169 174.7,169 		"/>
							<g>
								<polygon style="fill:none;" points="178.1,196.3 213.4,196.3 213.5,195.7 178,195.7 			"/>
								<polygon style="fill:none;" points="176.7,185.1 214.8,185.1 214.9,184.5 176.7,184.5 			"/>
								<polygon style="fill:none;" points="176.9,186.4 214.6,186.4 214.7,185.9 176.8,185.9 			"/>
								<polygon style="fill:none;" points="176.6,183.7 215,183.7 215,183.3 176.5,183.3 			"/>
								<polygon style="fill:none;" points="179.7,208.7 211.9,208.7 213.3,197.2 178.2,197.2 			"/>
								<polygon style="fill:none;" points="177.1,187.8 214.5,187.8 214.5,187.3 177,187.3 			"/>
								<polygon style="fill:none;" points="177.2,189.2 214.3,189.2 214.4,188.6 177.2,188.6 			"/>
								<polygon style="fill:none;" points="176.4,182.5 215.1,182.5 215.2,182 176.3,182 			"/>
								<polygon style="fill:none;" points="177.9,194.9 213.6,194.9 213.7,194.2 177.9,194.2 			"/>
								<polygon style="fill:none;" points="176.2,181.2 215.3,181.2 215.3,180.7 176.2,180.7 			"/>
								<polygon style="fill:none;" points="177.6,191.9 214,191.9 214,191.4 177.5,191.4 			"/>
								<polygon style="fill:none;" points="173.9,167.1 173.9,169 174.7,169 176.1,179.9 215.4,179.9 216.8,169 217.6,169 217.6,167.1 
												"/>
								<polygon style="fill:none;" points="177.4,190.5 214.1,190.5 214.2,190 177.3,190 			"/>
								<polygon style="fill:none;" points="177.8,193.4 213.8,193.4 213.8,192.8 177.7,192.8 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="176.7,184.5 214.9,184.5 215,183.7 176.6,183.7 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="176.8,185.9 214.7,185.9 214.8,185.1 176.7,185.1 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="176.5,183.3 215,183.3 215.1,182.5 176.4,182.5 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="176.3,182 215.2,182 215.3,181.2 176.2,181.2 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="176.2,180.7 215.3,180.7 215.4,179.9 176.1,179.9 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177,187.3 214.5,187.3 214.6,186.4 176.9,186.4 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177.2,188.6 214.4,188.6 214.5,187.8 177.1,187.8 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177.3,190 214.2,190 214.3,189.2 177.2,189.2 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177.5,191.4 214,191.4 214.1,190.5 177.4,190.5 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177.7,192.8 213.8,192.8 214,191.9 177.6,191.9 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="177.9,194.2 213.7,194.2 213.8,193.4 177.8,193.4 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="178,195.7 213.5,195.7 213.6,194.9 177.9,194.9 			"/>
								<polygon style="opacity:0.1;fill:#5D5E5E;" points="178.2,197.2 213.3,197.2 213.4,196.3 178.1,196.3 			"/>
							</g>
							<path style="opacity:0.1;fill:#543A33;" d="M212.6,203.1c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7-0.1-1-0.1c-2.5-0.7-5.1-1-7.6-1
								c-0.4,0-0.7,0-1.1,0c-5.7,2.2-3.7-3.8-4.5-7.4c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-0.5-0.1-0.8c-0.2-2.8,0.3-5.8-0.7-10.1
								c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
								c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
								c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-0.5,6.9,0.6,11.1c0,0.4,0.1,0.7,0.1,1
								c0.2,2.9-1.8,4.9-2.9,6.9c-0.1,0.2-0.3,0.4-0.4,0.5c-4.9,0.3-6.1,1.3-10.2,1.1c-0.4-0.1-0.8-0.1-1.2-0.1c-0.7,0-1.4,0.1-2,0.6
								l0.6,4.5h32.2L212.6,203.1z">
								<animate attributeName="d" begin="0s" dur="3s"
									values="M212.6,203.1c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7-0.1-1-0.1c-2.5-0.7-5.1-1-7.6-1
									c-0.4,0-0.7,0-1.1,0c-5.7,2.2-3.7-3.8-4.5-7.4c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-0.5-0.1-0.8c-0.2-2.8,0.3-5.8-0.7-10.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-0.5,6.9,0.6,11.1c0,0.4,0.1,0.7,0.1,1
									c0.2,2.9-1.8,4.9-2.9,6.9c-0.1,0.2-0.3,0.4-0.4,0.5c-4.9,0.3-6.1,1.3-10.2,1.1c-0.4-0.1-0.8-0.1-1.2-0.1c-0.7,0-1.4,0.1-2,0.6
									l0.6,4.5h32.2L212.6,203.1z;
									M212.8,200.8c-0.1,0-0.8,0-1.6,0.6c-0.3,0.2-0.7,0-1.6,0.5c-2.5-0.7-2.6-0.9-5.1-0.9
									c-0.4,0-2,0.1-2.4,0.1c-5.7,2.2-3.2-2.9-4-6.6c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-1.9-0.1-2.2c-0.2-2.8,1.1-2.5,0.1-6.8
									c0.2-1.2,0-1.6,0-1.9c0-0.3,0-0.8,0-1.1c0-0.5-0.3-0.9-0.3-1.3c0-0.3-0.1-1.1-0.1-1.4c0-1.2-0.2-2-0.1-3c0-0.3-0.1-1.3-0.1-1.6
									c0-2.1,0-5,0-7.1h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5,0,6.1,1.2,10.3c0.5,1.2,0,3.8,0,4.1
									c0.2,2.9-2.3,1.6-3.5,3.6c-0.1,0.2-1.6,0.7-1.7,0.9c-4.9,0.3-4.2,1.1-8.3,0.9c-0.4-0.1-1.6-0.4-2-0.4c-0.7,0-1.3-0.9-1.9-0.4
									l0.8,6.6h32.2L212.8,200.8z;
									M212.6,203.1c-0.1,0,0.8-5.9,0.7-5.9c-0.3,0-2.7-1.1-3.1-1.2c-2.5-0.7-3.2,0.8-5.7,0.7
									c-0.4,0-2.2-0.4-2.6-0.4c-1.4,0-2.9,1.8-3.8-1.8c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-0.5-0.1-0.8c-0.2-2.8,0.3-5.8-0.7-10.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-0.5,6.9,0.6,11.1c0,0.4,0.1,0.7,0.1,1
									c0.2,2.9-2.6,0-3.7,1.9c-0.1,0.2-2.9-0.2-3.1,0c-4.9,0.3-3.2-1.3-7.3-1.5c-0.4-0.1-1.5,0.3-1.9,0.3c-0.7,0-1.2-1.6-1.8-1.2
									l1.7,13.8h32.2L212.6,203.1z;
									M212.6,203.1c-0.1,0,1.7-13,1.6-13c-0.3,0-1.1,0.8-1.9,0.8c-0.8-0.2-2.3,0.2-2.7,0.2
									c-0.4,0-2.7,0-3,0c-1.4,0-2.3,0.7-4.2,0.6c0-0.3-2.4-0.1-3.6-0.1c-0.3,0-0.9-0.3-1-0.5c-0.2-2.8,0.5-3.8-0.5-8.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-1.2,2.3,0,6.5c0,0.4,0.6,1.1-0.6,1.3
									c-0.4,0.1-1.1-0.1-1.4,0c-0.1,0.2-1.9,0.6-2.1,0.8c-4.9,0.3-2.2,0.4-6.3,0.3c-0.4-0.1-3.3,0-3.7,0c-0.7,0-3.1-1.8-3.8-1.4
									l2.2,18.1h32.2L212.6,203.1z;
									M212.6,203.1c-0.1,0,2.1-16.9,2.1-16.9c-0.3,0-1.3,0.7-2.1,0.7
									c-0.8-0.2-2.3,0.4-2.7,0.4c-0.4,0-1.4,0.3-2.9,0.3c-1.4,0-2.8-0.1-4.7-0.3c0-0.3-1.9-0.4-3.2-0.4c-0.3,0-1.2-0.4-1.3-0.7
									c-0.2-2.8-0.4-2.9-0.5-3.5c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5
									c0-0.3,0-0.6,0-0.9c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7
									c0,0.3,0,0.6-0.1,0.9c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0,0.6-0.6,0.6,0,2.8c0,0.4,0.4,0.8-0.8,1
									c-0.4,0.1-1.2,0.4-1.4,0.4c-0.1,0.2-0.6-0.4-1.9-0.4c-1.1,0.1-1-0.2-5.1-0.4c-2.5,0-4.6,0.7-5.7,0.4c-0.7-0.2-2.8-0.9-3.4-0.4
									l2.8,22.3h32.2L212.6,203.1z;
									M212.6,203.1c-0.1,0,1.7-13,1.6-13c-0.3,0-1.1,0.8-1.9,0.8c-0.8-0.2-2.3,0.2-2.7,0.2
									c-0.4,0-2.7,0-3,0c-1.4,0-2.3,0.7-4.2,0.6c0-0.3-2.4-0.1-3.6-0.1c-0.3,0-0.9-0.3-1-0.5c-0.2-2.8,0.5-3.8-0.5-8.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-1.2,2.3,0,6.5c0,0.4,0.6,1.1-0.6,1.3
									c-0.4,0.1-1.1-0.1-1.4,0c-0.1,0.2-1.9,0.6-2.1,0.8c-4.9,0.3-2.2,0.4-6.3,0.3c-0.4-0.1-3.3,0-3.7,0c-0.7,0-3.1-1.8-3.8-1.4
									l2.2,18.1h32.2L212.6,203.1z;
									M212.6,203.1c-0.1,0,0.8-5.9,0.7-5.9c-0.3,0-2.7-1.1-3.1-1.2c-2.5-0.7-3.2,0.8-5.7,0.7
									c-0.4,0-2.2-0.4-2.6-0.4c-1.4,0-2.9,1.8-3.8-1.8c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-0.5-0.1-0.8c-0.2-2.8,0.3-5.8-0.7-10.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-0.5,6.9,0.6,11.1c0,0.4,0.1,0.7,0.1,1
									c0.2,2.9-2.6,0-3.7,1.9c-0.1,0.2-2.9-0.2-3.1,0c-4.9,0.3-3.2-1.3-7.3-1.5c-0.4-0.1-1.5,0.3-1.9,0.3c-0.7,0-1.2-1.6-1.8-1.2
									l1.7,13.8h32.2L212.6,203.1z;
									M212.8,200.8c-0.1,0-0.8,0-1.6,0.6c-0.3,0.2-0.7,0-1.6,0.5c-2.5-0.7-2.6-0.9-5.1-0.9
									c-0.4,0-2,0.1-2.4,0.1c-5.7,2.2-3.2-2.9-4-6.6c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-1.9-0.1-2.2c-0.2-2.8,1.1-2.5,0.1-6.8
									c0.2-1.2,0-1.6,0-1.9c0-0.3,0-0.8,0-1.1c0-0.5-0.3-0.9-0.3-1.3c0-0.3-0.1-1.1-0.1-1.4c0-1.2-0.2-2-0.1-3c0-0.3-0.1-1.3-0.1-1.6
									c0-2.1,0-5,0-7.1h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5,0,6.1,1.2,10.3c0.5,1.2,0,3.8,0,4.1
									c0.2,2.9-2.3,1.6-3.5,3.6c-0.1,0.2-1.6,0.7-1.7,0.9c-4.9,0.3-4.2,1.1-8.3,0.9c-0.4-0.1-1.6-0.4-2-0.4c-0.7,0-1.3-0.9-1.9-0.4
									l0.8,6.6h32.2L212.8,200.8z;
									M212.6,203.1c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7-0.1-1-0.1c-2.5-0.7-5.1-1-7.6-1
									c-0.4,0-0.7,0-1.1,0c-5.7,2.2-3.7-3.8-4.5-7.4c0-0.3-0.1-0.6-0.1-0.9c0-0.3-0.1-0.5-0.1-0.8c-0.2-2.8,0.3-5.8-0.7-10.1
									c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.5-0.1-0.8c0-0.5-0.1-1-0.1-1.4c0-0.3,0-0.6,0-0.9c0-1.2,0-2.4,0-3.5c0-0.3,0-0.6,0-0.9
									c0-2.1,0.4-5.1,0.5-7.2h-2.4c-0.1,2.4-0.1,5.3-0.1,7.4c0,0.3,0,0.7,0,1c-0.2,0.6-0.4,1.5-0.5,2.7c0,0.3,0,0.6-0.1,0.9
									c-0.1,0.6-0.1,1.2,0,1.9c0.1,0.3,0.1,0.7,0.2,1s0.2,0.7,0.3,1c0.2,7.5-0.5,6.9,0.6,11.1c0,0.4,0.1,0.7,0.1,1
									c0.2,2.9-1.8,4.9-2.9,6.9c-0.1,0.2-0.3,0.4-0.4,0.5c-4.9,0.3-6.1,1.3-10.2,1.1c-0.4-0.1-0.8-0.1-1.2-0.1c-0.7,0-1.4,0.1-2,0.6
									l0.6,4.5h32.2L212.6,203.1z;" repeatCount="indefinite"
								/>
							</path>
						</g>
						<path style="fill:#543A33;" d="M196.7,144.9c-0.3,0-0.6-0.1-1-0.1c-0.4,0-0.8,0-1.1,0.1c0,0,0,0.1,0,0.1c-0.1,0.2-0.1,0.4,0,0.7
							c2.5,2.4-0.5,5.4,0.5,8.4c0,0.3,0,0.6,0,1c0,1.3,0.1,2.5,0.2,3.8c0,0.3,0,0.6-0.1,0.9c-0.1,1.8-0.1,3.7,0.1,5.8c0,0.4,0,0.8,0,1.2
							c0,0.1,0,0.2,0,0.4c0.7,0,1.5,0,2.4,0c0-0.3,0-0.5,0-0.8c0-0.3,0-0.7,0-1c0.2-2,0.3-3.5,0.3-5.2c0-0.3,0-0.7,0-1
							c-0.3-1.2-0.4-2.3-0.4-3.3c0-0.4,0-0.7,0-1.1C198,151.4,198.9,147.8,196.7,144.9z">
							<animate attributeName="d" begin="0s" dur="3s"
								values="M196.7,144.9c-0.3,0-0.6-0.1-1-0.1c-0.4,0-0.8,0-1.1,0.1c0,0,0,0.1,0,0.1c-0.1,0.2-0.1,0.4,0,0.7
								c2.5,2.4-0.5,5.4,0.5,8.4c0,0.3,0,0.6,0,1c0,1.3,0.1,2.5,0.2,3.8c0,0.3,0,0.6-0.1,0.9c-0.1,1.8-0.1,3.7,0.1,5.8c0,0.4,0,0.8,0,1.2
								c0,0.1,0,0.2,0,0.4c0.7,0,1.5,0,2.4,0c0-0.3,0-0.5,0-0.8c0-0.3,0-0.7,0-1c0.2-2,0.3-3.5,0.3-5.2c0-0.3,0-0.7,0-1c-0.3-1.2-0.4-2.3-0.4-3.3c0-0.4,0-0.7,0-1.1C198,151.4,198.9,147.8,196.7,144.9z;M196.7,144.9c-0.3,0-0.6-0.1-1-0.1c-0.4,0-0.8,0-1.1,0.1c0,0,0,0.1,0,0.1c-0.1,0.2-0.1,0.4,0,0.7c-0.1,2-0.5,1.3,0.5,4.3c0.1,2.3,0.9,4.8,0.9,5.1c0,1.3-0.4,2.1-0.3,3.4c0,0.3,0,1.5,0,1.8c-0.1,1.8-0.1,3,0.1,5c0,0.4-0.1,0.8-0.1,1.2c0,0.1-0.5,0.5-0.5,0.6c0.7,0,1.5,0,2.4,0c0-0.3-0.4-0.4-0.4-0.6c0-0.3-0.2-0.6-0.2-0.9c0.2-2,0.1-1.2,0-2.9c0-0.3,0.3-3.1,0.3-3.4c-0.3-1.2,0.2-2.5,0.2-3.6c0-0.4,0-3.5,0-3.8C198.1,148.6,198.9,147.8,196.7,144.9z;M196.7,144.9c-0.3,0-0.6-0.1-1-0.1c-0.4,0-0.8,0-1.1,0.1c0,0,0,0.1,0,0.1c-0.1,0.2-0.1,0.4,0,0.7
c2.5,2.4-0.5,5.4,0.5,8.4c0,0.3,0,0.6,0,1c0,1.3,0.1,2.5,0.2,3.8c0,0.3,0,0.6-0.1,0.9c-0.1,1.8-0.1,3.7,0.1,5.8c0,0.4,0,0.8,0,1.2c0,0.1,0,0.2,0,0.4c0.7,0,1.5,0,2.4,0c0-0.3,0-0.5,0-0.8c0-0.3,0-0.7,0-1c0.2-2,0.3-3.5,0.3-5.2c0-0.3,0-0.7,0-1c-0.3-1.2-0.4-2.3-0.4-3.3c0-0.4,0-0.7,0-1.1C198,151.4,198.9,147.8,196.7,144.9z;" repeatCount="indefinite"
							/>
						</path>
					</g>
					</svg>

Info: Fungsi dari kode HTMLnya adalah untuk menampilkan animasi HTML filosofi kopi tersebut

Contoh Tampilan

Sebagi pelengkapnya admin bakalan memberikan contoh tampilan dari animasi HTML filosofi kopi tersebut, gunakan tombol dibawah ini untuk langsung melihatnya

Info: Bagaimana sobat dengan contoh tampilannya keren yak

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.