Tidak ada pin yang di tentukan
Home AnimationTutorial Animasi Emoticon ped...

Animasi Emoticon peduli menggunakan anime library

Hai sob, tarik napas dulu ;), biar semua nya menjadi ademm hehe.
Di sesi kali ini saya akan membagikan kode sumber emoticon peduli yang sedang trending di fb itu loh.




Nah penasaran.. stop dulu bos, dalam 5 menit kedepan saya akan membagikan dan sertakan penjelasan yang terkait animasi emoticon peduli menggunakan anime library atau juga anime.js

Emoticon peduli ini di kontrol dengan anime.js dan svg sebagai dasar layout nya.

Gk ada CSS nya mas?
Ya tentu aja ada, tapi stop dulu pertanyaan mu bos.

Untuk Langkah demi langkah Step by step nya 🤭 untuk membuat animasi emoticon tersebut kita perlu menyiapkan alat tempurnya seperti biasanya (gk usah di bahas ya sob)

Berkutlah semua kode sumber yang dimulai dari Html, Css, Svg dan anime.js yang tinggal kamu salin tempelkan dalam text editor.

Langkah pertama
Merekatkan library anime.js sebagai fungsi dari animasi emoticon peduli tersebut

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js" type="text/javascript" charset="utf-8"></script>

Langkah kedua
Merekatkan html dan svg sebagai dasar layout animasi emoticon perduli nya

<div class="container">
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <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" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        clip-path: url(#SVGID_2_);
      }
      .st1 {
        fill: url(#mukaKuning_1_);
      }
      .st2 {
        fill: url(#mukaRed_1_);
      }
      .st3 {
        fill: url(#SVGID_3_);
      }
      .st4 {
        fill: url(#mouth_1_);
      }
      .st5 {
        fill: url(#SVGID_4_);
      }
      .st6 {
        fill: #4E506A;
      }
      .st7 {
        fill: url(#SVGID_5_);
      }
      .st8 {
        fill: url(#rBrow_1_);
      }
      .st9 {
        fill: url(#lBrow_1_);
      }
      .st10 {
        fill: url(#SVGID_6_);
      }
      .st11 {
        fill: url(#SVGID_7_);
      }
      .st12 {
        fill: url(#SVGID_8_);
      }
      .st13 {
        fill: url(#SVGID_9_);
      }
      .st14 {
        fill: url(#SVGID_10_);
      }
      .st15 {
        fill: url(#SVGID_11_);
      }
      .st16 {
        fill: url(#SVGID_12_);
      }
      .st17 {
        fill: url(#SVGID_13_);
      }
      .st18 {
        fill: url(#SVGID_14_);
      }
      .st19 {
        fill: url(#SVGID_15_);
      }
    </style>
    <g>
      <defs>
        <rect id="SVGID_1_" x="30" y="30" width="940" height="940" />
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_" style="overflow:visible;" />
      </clipPath>
      <g class="st0">
        <linearGradient id="mukaKuning_1_" gradientUnits="userSpaceOnUse" x1="500" y1="78.53" x2="500" y2="901.97" gradientTransform="matrix(1 0 0 -1 0 1002)">
          <stop offset="0" style="stop-color:#F28A2D" />
          <stop offset="1" style="stop-color:#FDE86F" />
        </linearGradient>
        <path id="mukaKuning" class="st1" d="M970,500c0,258.5-211.5,470-470,470S30,758.5,30,500S241.5,30,500,30S970,241.5,970,500z" />
        <radialGradient id="mukaRed_1_" cx="412.376" cy="589.624" r="58.75" gradientTransform="matrix(8 0 0 -8 -2799.0081 5216.9922)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0" />
          <stop offset="1" style="stop-color:#F08423;stop-opacity:0.34" />
        </radialGradient>
        <path id="mukaRed" class="st2" d="M970,500c0,258.5-211.5,470-470,470S30,758.5,30,500S241.5,30,500,30S970,241.5,970,500z" />
        <radialGradient id="SVGID_3_" cx="383.4963" cy="1374.8669" r="58.75" gradientTransform="matrix(1.754 -0.3009 -6.373839e-02 -0.3274 -282.3434 733.1263)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#D45F00;stop-opacity:0.15" />
          <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
        </radialGradient>
        <path class="st3" d="M970,510.5C970,763.2,749.7,970,480.5,970S-9,763.2-9,510.5S211.3,51,480.5,51S970,257.8,970,510.5z" />
        <linearGradient id="mouth_1_" gradientUnits="userSpaceOnUse" x1="500" y1="660.0775" x2="500" y2="576.4227" gradientTransform="matrix(1 0 0 -1 0 1002)">
          <stop offset="0" style="stop-color:#482314" />
          <stop offset="1" style="stop-color:#9A4111" />
        </linearGradient>
        <path id="mouth" class="st4" d="M599.9,376.6C594,359,406,359,400.1,376.6s35.3,41.1,99.9,41.1S605.8,394.3,599.9,376.6z" />
        <g id="lEye">
          <radialGradient id="SVGID_4_" cx="467.8636" cy="645.4534" r="58.75" gradientTransform="matrix(1.138695e-16 -1.8596 -1.8596 -1.138695e-16 1523.6304 1150.9828)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#3B446B" />
            <stop offset="0.688" style="stop-color:#202340" />
          </radialGradient>
          <path class="st5" d="M382.5,270.9c0,41.1-23.5,52.9-58.8,58.8s-64.6-11.8-64.6-58.8c0-35.3,17.6-82.3,64.6-82.3
            C364.9,188.6,382.5,235.6,382.5,270.9z" />
          <path class="st6" d="M317.9,212.1c5.9,5.9,5.9,23.5-5.9,29.4c-5.9,5.9-17.6,11.8-23.5,0s-5.9-17.6,0-29.4
            C300.3,206.3,312,206.3,317.9,212.1z" />
        </g>
        <g id="rEye">
          <radialGradient id="SVGID_5_" cx="467.899" cy="447.5924" r="58.75" gradientTransform="matrix(1.138695e-16 -1.8596 -1.6906 -1.035225e-16 1427.996 1150.9816)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#3B446B" />
            <stop offset="0.688" style="stop-color:#202340" />
          </radialGradient>
          <path class="st7" d="M617.5,270.9c0,41.1,21.4,52.9,58.8,58.8c32,5.9,58.8-11.8,58.8-58.8c0-35.3-16-82.3-58.8-82.3
            S617.5,235.6,617.5,270.9z" />
          <path class="st6" d="M670.9,212.1c5.3,5.9,0,17.6-5.3,29.4c-5.3,5.9-16,5.9-21.4,0c-5.3-5.9,0-17.6,5.3-29.4
            C660.2,200.4,665.6,200.4,670.9,212.1z" />
        </g>
        <radialGradient id="rBrow_1_" cx="1101.6755" cy="607.2277" r="58.7625" gradientTransform="matrix(-0.101 -0.3927 -1.8202 0.4683 1540.4578 278.7458)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#E38200" />
          <stop offset="1" style="stop-color:#CD6700" />
        </radialGradient>
        <path id="lBrow" class="st8" d="M229.8,153.4c-11.8,11.8,0,29.4,17.6,23.5c35.3-17.6,105.8-35.3,164.5-29.4
          c17.6,0,23.5,0,17.6-23.5c0-17.6-23.5-29.4-70.5-23.5C288.5,106.4,241.5,141.6,229.8,153.4z" />
        <radialGradient id="lBrow_1_" cx="1165.9583" cy="521.2252" r="58.75" gradientTransform="matrix(8.091818e-02 -0.4195 -2.4893 -0.4802 1875.5717 859.3414)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#E38200" />
          <stop offset="1" style="stop-color:#CD6700" />
        </radialGradient>
        <path id="rBrow" class="st9" d="M641,100.5c-47-5.9-70.5,5.9-70.5,23.5c-5.9,23.5,0,23.5,17.6,23.5
          c64.6-5.9,135.1,11.8,164.5,29.4c23.5,11.8,29.4-11.8,17.6-23.5S711.5,106.4,641,100.5z" />
        <radialGradient id="SVGID_6_" cx="155.0446" cy="562.2991" r="58.75" gradientTransform="matrix(1.108 -0.4068 -0.5242 -1.4278 273.7917 1431.3267)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#9C0600;stop-opacity:0.5" />
          <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
        </radialGradient>
        <path class="st10" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
          c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
          C711.5,693.9,717.4,564.6,599.9,529.4z" />
        <g id="heart">
          <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="426.3219" y1="399.4576" x2="307.0183" y2="15.1103" gradientTransform="matrix(1 0 0 -1 0 1002)">
            <stop offset="0" style="stop-color:#F34462" />
            <stop offset="1" style="stop-color:#CC0820" />
          </linearGradient>
          <path class="st11" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_8_" cx="485.1524" cy="526.7298" r="58.75" gradientTransform="matrix(2.4679 0.9174 0.9174 -2.4679 -1131.1698 1527.2452)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#FF7091;stop-opacity:0.7" />
            <stop offset="1" style="stop-color:#FE6D8E;stop-opacity:0" />
          </radialGradient>
          <path class="st12" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_9_" cx="381.0137" cy="519.0494" r="58.75" gradientTransform="matrix(2.4679 0.9174 0.9174 -2.4679 -1135.7422 1525.9191)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#FF7091;stop-opacity:0.7" />
            <stop offset="1" style="stop-color:#FE6D8E;stop-opacity:0" />
          </radialGradient>
          <path class="st13" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_10_" cx="547.1199" cy="576.5929" r="58.75" gradientTransform="matrix(-0.455 2.2144 3.0492 0.6265 -1245.1776 -851.7267)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#9C0600" />
            <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
          </radialGradient>
          <path class="st14" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_11_" cx="703.3879" cy="525.015" r="58.75" gradientTransform="matrix(1.1718 0.6939 0.8709 -1.4706 -580.8787 1018.5891)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#9C0600;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
          </radialGradient>
          <path class="st15" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
        </g>
        <g id="lHand">
          <radialGradient id="SVGID_12_" cx="355.8861" cy="2.3187" r="58.75" gradientTransform="matrix(1.4746 0.6611 -0.5114 1.1406 -378.9044 280.9018)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
          </radialGradient>
          <path class="st16" d="M983,500c0,258.5-211.5,470-470,470S43,758.5,43,500S254.5,30,513,30S983,241.5,983,500z" />
          <radialGradient id="SVGID_13_" cx="678.4081" cy="26.2063" r="58.75" gradientTransform="matrix(5.3432 3.9564 -3.9564 5.3432 -3482.9348 -2355.3027)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#EDA83A" />
            <stop offset="1" style="stop-color:#FFDC5E" />
          </radialGradient>
          <path class="st17" d="M119.4,482.4c-29.4-29.4-82.2-47-88.1,23.5c-5.9,52.9,17.6,146.9,82.3,199.7
            c164.5,129.3,311.4,58.8,317.3-35.3c5.9-70.5-82.3-64.6-105.8-64.6c0,0,0,0,0-5.9c5.9-5.9,17.6-11.8,23.5-17.6
            c23.5-17.6,11.8-47-17.6-41.1c-5.9,0-76.4,23.5-123.4,5.9S154.6,511.8,119.4,482.4z" />
        </g>
        <g id="rHand">
          <radialGradient id="SVGID_14_" cx="796.6882" cy="-80.7337" r="58.75" gradientTransform="matrix(3.5563 -2.8028 1.0197 1.2938 -2034.6986 3059.1223)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
          </radialGradient>
          <path class="st18" d="M959,500c0,258.5-211.5,470-470,470S19,758.5,19,500S230.5,30,489,30S959,241.5,959,500z" />
          <radialGradient id="SVGID_15_" cx="814.7936" cy="-37.648" r="58.75" gradientTransform="matrix(8.846 0 0 8.846 -6268.9917 817.5828)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#EDA83A" />
            <stop offset="1" style="stop-color:#FFDC5E" />
          </radialGradient>
          <path class="st19" d="M859.1,488.3c17.6-35.3,47-23.5,64.6-17.6c23.5,5.9,41.1,23.5,41.1,58.8c0,88.1-11.8,170.4-88.1,252.6
            C741.6,934.8,512.5,911.3,489,817.3c-17.6-70.5,64.6-82.3,94-82.3v-5.9c-11.8-5.9-17.6-11.8-29.4-17.6
            c-23.5-17.6-17.6-52.9,11.8-47c35.3,5.9,82.3,17.6,117.5,11.8C794.5,664.5,812.1,576.4,859.1,488.3z" />
        </g>
      </g>
    </g>
  </svg>
</div>

Langkah ke tiga
Merekatkan css

<style type="text/css" media="all">
*{margin:0;padding:0;box-sizing:border-box}
.container{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh}
svg{height:50vh;transition:all 300ms ease-out}
svg:hover{height:80vh}
canvas{border:2px solid black;display:block;margin:auto}
#lHand{transform-origin:100px 500px}
#rHand{transform-origin:800px 500px}
#heart{transform-origin:450px 600px}
#lBrow{transform-origin:300px 200px}
#rBrow{transform-origin:700px 200px}
</style>

Langkah ke empat
Merekatkan javascript sebagai kontrol terkait anime.js

<script type="text/javascript" charset="utf-8">
var tl=anime.timeline({easing:"easeOutExpo",direction:"forward",loop:!0});
tl.add({targets:"#lEye , #rEye ",translateY:[{value:200}],scaleY:[{value:.15}],duration:150}).add({targets:"#lEye , #rEye ",translateY:[{value:0}],scaleY:[{value:1}],duration:200}).add({targets:"#lEye , #rEye ",translateY:[{value:200}],scaleY:[{value:.15}],duration:300}).add({targets:"#lEye , #rEye ",translateY:[{value:0}],scaleY:[{value:1}],duration:200}).add({targets:"#lEye , #rEye,#lBrow , #rBrow ,#mouth",translateY:[{value:70}],translateX:[{value:-70}],scaleY:[{value:1}],duration:1800},"-=200").add({targets:"#lEye",scaleY:[{value:.2}],scaleX:[{value:1.3}],translateY:[{value:200}],translateX:[{value:-150}],duration:1800},"-=200").add({targets:"#rEye",scaleY:[{value:.2}],scaleX:[{value:1.3}],translateY:[{value:200}],translateX:[{value:-250}],duration:1800},"-=1800").add({targets:"#mouth",scaleY:[{value:.5}],scaleX:[{value:1.2}],translateY:[{value:150}],translateX:[{value:-150}],duration:1800},"-=1800").add({targets:"#lBrow",scaleY:[{value:.8}],rotate:[{value:-15}],translateY:[{value:20}],duration:1800},"-=1800").add({targets:"#rBrow",scaleY:[{value:.8}],rotate:[{value:15}],translateY:[{value:20}],duration:1800},"-=1800").add({targets:"#lHand",rotate:[{value:15,duration:300},{value:-1,duration:1500}],scaleX:[{value:1.16,duration:1800}],translateX:[{value:20,duration:300}]},"-=1800").add({targets:"#rHand",rotate:[{value:-15,duration:300},{value:15,duration:1500}],scaleX:[{value:1.1,duration:1800}],translateX:[{value:-20,duration:1800}]},"-=1800").add({targets:"#heart",translateY:[{value:-50}],rotate:[{value:-10}],scale:[{value:.92}]},"-=1500").add({targets:"#lHand ,#rHand",rotate:[{value:0,duration:1800}],scaleX:[{value:1,duration:1800}],translateX:[{value:0,duration:1800}]}).add({targets:"#heart",translateY:[{value:0}],rotate:[{value:0}],scale:[{value:1}]},"-=1800").add({targets:"#lEye , #rEye,#lBrow , #rBrow ,#mouth",translateY:[{value:0}],translateX:[{value:0}],scaleY:[{value:1}],scaleX:[{value:1}],rotate:[{value:0}],duration:1800},"-=1800");
</script>

Dalam susunan markup yang benar maka akan tertera seperti dibawah ini

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js" type="text/javascript" charset="utf-8"></script>
<div class="container">
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <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" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        clip-path: url(#SVGID_2_);
      }
      .st1 {
        fill: url(#mukaKuning_1_);
      }
      .st2 {
        fill: url(#mukaRed_1_);
      }
      .st3 {
        fill: url(#SVGID_3_);
      }
      .st4 {
        fill: url(#mouth_1_);
      }
      .st5 {
        fill: url(#SVGID_4_);
      }
      .st6 {
        fill: #4E506A;
      }
      .st7 {
        fill: url(#SVGID_5_);
      }
      .st8 {
        fill: url(#rBrow_1_);
      }
      .st9 {
        fill: url(#lBrow_1_);
      }
      .st10 {
        fill: url(#SVGID_6_);
      }
      .st11 {
        fill: url(#SVGID_7_);
      }
      .st12 {
        fill: url(#SVGID_8_);
      }
      .st13 {
        fill: url(#SVGID_9_);
      }
      .st14 {
        fill: url(#SVGID_10_);
      }
      .st15 {
        fill: url(#SVGID_11_);
      }
      .st16 {
        fill: url(#SVGID_12_);
      }
      .st17 {
        fill: url(#SVGID_13_);
      }
      .st18 {
        fill: url(#SVGID_14_);
      }
      .st19 {
        fill: url(#SVGID_15_);
      }
    </style>
    <g>
      <defs>
        <rect id="SVGID_1_" x="30" y="30" width="940" height="940" />
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_" style="overflow:visible;" />
      </clipPath>
      <g class="st0">
        <linearGradient id="mukaKuning_1_" gradientUnits="userSpaceOnUse" x1="500" y1="78.53" x2="500" y2="901.97" gradientTransform="matrix(1 0 0 -1 0 1002)">
          <stop offset="0" style="stop-color:#F28A2D" />
          <stop offset="1" style="stop-color:#FDE86F" />
        </linearGradient>
        <path id="mukaKuning" class="st1" d="M970,500c0,258.5-211.5,470-470,470S30,758.5,30,500S241.5,30,500,30S970,241.5,970,500z" />
        <radialGradient id="mukaRed_1_" cx="412.376" cy="589.624" r="58.75" gradientTransform="matrix(8 0 0 -8 -2799.0081 5216.9922)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0" />
          <stop offset="1" style="stop-color:#F08423;stop-opacity:0.34" />
        </radialGradient>
        <path id="mukaRed" class="st2" d="M970,500c0,258.5-211.5,470-470,470S30,758.5,30,500S241.5,30,500,30S970,241.5,970,500z" />
        <radialGradient id="SVGID_3_" cx="383.4963" cy="1374.8669" r="58.75" gradientTransform="matrix(1.754 -0.3009 -6.373839e-02 -0.3274 -282.3434 733.1263)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#D45F00;stop-opacity:0.15" />
          <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
        </radialGradient>
        <path class="st3" d="M970,510.5C970,763.2,749.7,970,480.5,970S-9,763.2-9,510.5S211.3,51,480.5,51S970,257.8,970,510.5z" />
        <linearGradient id="mouth_1_" gradientUnits="userSpaceOnUse" x1="500" y1="660.0775" x2="500" y2="576.4227" gradientTransform="matrix(1 0 0 -1 0 1002)">
          <stop offset="0" style="stop-color:#482314" />
          <stop offset="1" style="stop-color:#9A4111" />
        </linearGradient>
        <path id="mouth" class="st4" d="M599.9,376.6C594,359,406,359,400.1,376.6s35.3,41.1,99.9,41.1S605.8,394.3,599.9,376.6z" />
        <g id="lEye">
          <radialGradient id="SVGID_4_" cx="467.8636" cy="645.4534" r="58.75" gradientTransform="matrix(1.138695e-16 -1.8596 -1.8596 -1.138695e-16 1523.6304 1150.9828)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#3B446B" />
            <stop offset="0.688" style="stop-color:#202340" />
          </radialGradient>
          <path class="st5" d="M382.5,270.9c0,41.1-23.5,52.9-58.8,58.8s-64.6-11.8-64.6-58.8c0-35.3,17.6-82.3,64.6-82.3
            C364.9,188.6,382.5,235.6,382.5,270.9z" />
          <path class="st6" d="M317.9,212.1c5.9,5.9,5.9,23.5-5.9,29.4c-5.9,5.9-17.6,11.8-23.5,0s-5.9-17.6,0-29.4
            C300.3,206.3,312,206.3,317.9,212.1z" />
        </g>
        <g id="rEye">
          <radialGradient id="SVGID_5_" cx="467.899" cy="447.5924" r="58.75" gradientTransform="matrix(1.138695e-16 -1.8596 -1.6906 -1.035225e-16 1427.996 1150.9816)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#3B446B" />
            <stop offset="0.688" style="stop-color:#202340" />
          </radialGradient>
          <path class="st7" d="M617.5,270.9c0,41.1,21.4,52.9,58.8,58.8c32,5.9,58.8-11.8,58.8-58.8c0-35.3-16-82.3-58.8-82.3
            S617.5,235.6,617.5,270.9z" />
          <path class="st6" d="M670.9,212.1c5.3,5.9,0,17.6-5.3,29.4c-5.3,5.9-16,5.9-21.4,0c-5.3-5.9,0-17.6,5.3-29.4
            C660.2,200.4,665.6,200.4,670.9,212.1z" />
        </g>
        <radialGradient id="rBrow_1_" cx="1101.6755" cy="607.2277" r="58.7625" gradientTransform="matrix(-0.101 -0.3927 -1.8202 0.4683 1540.4578 278.7458)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#E38200" />
          <stop offset="1" style="stop-color:#CD6700" />
        </radialGradient>
        <path id="lBrow" class="st8" d="M229.8,153.4c-11.8,11.8,0,29.4,17.6,23.5c35.3-17.6,105.8-35.3,164.5-29.4
          c17.6,0,23.5,0,17.6-23.5c0-17.6-23.5-29.4-70.5-23.5C288.5,106.4,241.5,141.6,229.8,153.4z" />
        <radialGradient id="lBrow_1_" cx="1165.9583" cy="521.2252" r="58.75" gradientTransform="matrix(8.091818e-02 -0.4195 -2.4893 -0.4802 1875.5717 859.3414)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#E38200" />
          <stop offset="1" style="stop-color:#CD6700" />
        </radialGradient>
        <path id="rBrow" class="st9" d="M641,100.5c-47-5.9-70.5,5.9-70.5,23.5c-5.9,23.5,0,23.5,17.6,23.5
          c64.6-5.9,135.1,11.8,164.5,29.4c23.5,11.8,29.4-11.8,17.6-23.5S711.5,106.4,641,100.5z" />
        <radialGradient id="SVGID_6_" cx="155.0446" cy="562.2991" r="58.75" gradientTransform="matrix(1.108 -0.4068 -0.5242 -1.4278 273.7917 1431.3267)" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color:#9C0600;stop-opacity:0.5" />
          <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
        </radialGradient>
        <path class="st10" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
          c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
          C711.5,693.9,717.4,564.6,599.9,529.4z" />
        <g id="heart">
          <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="426.3219" y1="399.4576" x2="307.0183" y2="15.1103" gradientTransform="matrix(1 0 0 -1 0 1002)">
            <stop offset="0" style="stop-color:#F34462" />
            <stop offset="1" style="stop-color:#CC0820" />
          </linearGradient>
          <path class="st11" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_8_" cx="485.1524" cy="526.7298" r="58.75" gradientTransform="matrix(2.4679 0.9174 0.9174 -2.4679 -1131.1698 1527.2452)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#FF7091;stop-opacity:0.7" />
            <stop offset="1" style="stop-color:#FE6D8E;stop-opacity:0" />
          </radialGradient>
          <path class="st12" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_9_" cx="381.0137" cy="519.0494" r="58.75" gradientTransform="matrix(2.4679 0.9174 0.9174 -2.4679 -1135.7422 1525.9191)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#FF7091;stop-opacity:0.7" />
            <stop offset="1" style="stop-color:#FE6D8E;stop-opacity:0" />
          </radialGradient>
          <path class="st13" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_10_" cx="547.1199" cy="576.5929" r="58.75" gradientTransform="matrix(-0.455 2.2144 3.0492 0.6265 -1245.1776 -851.7267)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#9C0600" />
            <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
          </radialGradient>
          <path class="st14" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
          <radialGradient id="SVGID_11_" cx="703.3879" cy="525.015" r="58.75" gradientTransform="matrix(1.1718 0.6939 0.8709 -1.4706 -580.8787 1018.5891)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#9C0600;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#9C0600;stop-opacity:0" />
          </radialGradient>
          <path class="st15" d="M599.9,529.4c-123.4-35.3-164.5,47-164.5,47s11.8-94-111.6-135.1c-117.5-35.3-188,76.4-193.9,141
            c-11.8,146.9,117.5,311.4,164.5,370.1c5.9,17.6,23.5,17.6,41.1,17.6c70.5-17.6,270.3-82.3,346.6-211.5
            C711.5,693.9,717.4,564.6,599.9,529.4z" />
        </g>
        <g id="lHand">
          <radialGradient id="SVGID_12_" cx="355.8861" cy="2.3187" r="58.75" gradientTransform="matrix(1.4746 0.6611 -0.5114 1.1406 -378.9044 280.9018)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
          </radialGradient>
          <path class="st16" d="M983,500c0,258.5-211.5,470-470,470S43,758.5,43,500S254.5,30,513,30S983,241.5,983,500z" />
          <radialGradient id="SVGID_13_" cx="678.4081" cy="26.2063" r="58.75" gradientTransform="matrix(5.3432 3.9564 -3.9564 5.3432 -3482.9348 -2355.3027)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#EDA83A" />
            <stop offset="1" style="stop-color:#FFDC5E" />
          </radialGradient>
          <path class="st17" d="M119.4,482.4c-29.4-29.4-82.2-47-88.1,23.5c-5.9,52.9,17.6,146.9,82.3,199.7
            c164.5,129.3,311.4,58.8,317.3-35.3c5.9-70.5-82.3-64.6-105.8-64.6c0,0,0,0,0-5.9c5.9-5.9,17.6-11.8,23.5-17.6
            c23.5-17.6,11.8-47-17.6-41.1c-5.9,0-76.4,23.5-123.4,5.9S154.6,511.8,119.4,482.4z" />
        </g>
        <g id="rHand">
          <radialGradient id="SVGID_14_" cx="796.6882" cy="-80.7337" r="58.75" gradientTransform="matrix(3.5563 -2.8028 1.0197 1.2938 -2034.6986 3059.1223)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#F28A2D;stop-opacity:0.5" />
            <stop offset="1" style="stop-color:#F28A2D;stop-opacity:0" />
          </radialGradient>
          <path class="st18" d="M959,500c0,258.5-211.5,470-470,470S19,758.5,19,500S230.5,30,489,30S959,241.5,959,500z" />
          <radialGradient id="SVGID_15_" cx="814.7936" cy="-37.648" r="58.75" gradientTransform="matrix(8.846 0 0 8.846 -6268.9917 817.5828)" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#EDA83A" />
            <stop offset="1" style="stop-color:#FFDC5E" />
          </radialGradient>
          <path class="st19" d="M859.1,488.3c17.6-35.3,47-23.5,64.6-17.6c23.5,5.9,41.1,23.5,41.1,58.8c0,88.1-11.8,170.4-88.1,252.6
            C741.6,934.8,512.5,911.3,489,817.3c-17.6-70.5,64.6-82.3,94-82.3v-5.9c-11.8-5.9-17.6-11.8-29.4-17.6
            c-23.5-17.6-17.6-52.9,11.8-47c35.3,5.9,82.3,17.6,117.5,11.8C794.5,664.5,812.1,576.4,859.1,488.3z" />
        </g>
      </g>
    </g>
  </svg>
</div>
<style type="text/css" media="all">
*{margin:0;padding:0;box-sizing:border-box}
.container{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh}
svg{height:50vh;transition:all 300ms ease-out}
svg:hover{height:80vh}
canvas{border:2px solid black;display:block;margin:auto}
#lHand{transform-origin:100px 500px}
#rHand{transform-origin:800px 500px}
#heart{transform-origin:450px 600px}
#lBrow{transform-origin:300px 200px}
#rBrow{transform-origin:700px 200px}
</style>
<script type="text/javascript" charset="utf-8">
var tl=anime.timeline({easing:"easeOutExpo",direction:"forward",loop:!0});
tl.add({targets:"#lEye , #rEye ",translateY:[{value:200}],scaleY:[{value:.15}],duration:150}).add({targets:"#lEye , #rEye ",translateY:[{value:0}],scaleY:[{value:1}],duration:200}).add({targets:"#lEye , #rEye ",translateY:[{value:200}],scaleY:[{value:.15}],duration:300}).add({targets:"#lEye , #rEye ",translateY:[{value:0}],scaleY:[{value:1}],duration:200}).add({targets:"#lEye , #rEye,#lBrow , #rBrow ,#mouth",translateY:[{value:70}],translateX:[{value:-70}],scaleY:[{value:1}],duration:1800},"-=200").add({targets:"#lEye",scaleY:[{value:.2}],scaleX:[{value:1.3}],translateY:[{value:200}],translateX:[{value:-150}],duration:1800},"-=200").add({targets:"#rEye",scaleY:[{value:.2}],scaleX:[{value:1.3}],translateY:[{value:200}],translateX:[{value:-250}],duration:1800},"-=1800").add({targets:"#mouth",scaleY:[{value:.5}],scaleX:[{value:1.2}],translateY:[{value:150}],translateX:[{value:-150}],duration:1800},"-=1800").add({targets:"#lBrow",scaleY:[{value:.8}],rotate:[{value:-15}],translateY:[{value:20}],duration:1800},"-=1800").add({targets:"#rBrow",scaleY:[{value:.8}],rotate:[{value:15}],translateY:[{value:20}],duration:1800},"-=1800").add({targets:"#lHand",rotate:[{value:15,duration:300},{value:-1,duration:1500}],scaleX:[{value:1.16,duration:1800}],translateX:[{value:20,duration:300}]},"-=1800").add({targets:"#rHand",rotate:[{value:-15,duration:300},{value:15,duration:1500}],scaleX:[{value:1.1,duration:1800}],translateX:[{value:-20,duration:1800}]},"-=1800").add({targets:"#heart",translateY:[{value:-50}],rotate:[{value:-10}],scale:[{value:.92}]},"-=1500").add({targets:"#lHand ,#rHand",rotate:[{value:0,duration:1800}],scaleX:[{value:1,duration:1800}],translateX:[{value:0,duration:1800}]}).add({targets:"#heart",translateY:[{value:0}],rotate:[{value:0}],scale:[{value:1}]},"-=1800").add({targets:"#lEye , #rEye,#lBrow , #rBrow ,#mouth",translateY:[{value:0}],translateX:[{value:0}],scaleY:[{value:1}],scaleX:[{value:1}],rotate:[{value:0}],duration:1800},"-=1800");
</script>

#

SHARE

2 tanggapan untuk “Animasi Emoticon peduli menggunakan anime library”

  1. Fina berkata:

    Bermanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *


URL berhasil di salin
Data off atau jaringan lambat
Memuat content..
Keluar versi AMP