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