Animasi Gradasi Ikon SVG

Cara Membuat Gradient Animation Pada Ikon SVG
Daftar Isi Artikel []
SVG Gradient Animation Blogger - Cara membuat warna gradasi bergerak pada ikon SVG. Ini merupakan lanjutan dari artikel sebelumnya yang membahas cara membuat warna gradient pada ikon svg.

Perbedaan Kode Gradient Dan Gradient Animation Pada Icon SVG

Gradient ColorGradient Animation
- Elemen <stop> adalah self tag.
- Elemen <stop> pada Gradient Color harus memiliki atribut offset dan stop-color.
- Jumlah elemen tergantung pada jumlah warna yang digunakan
- Elemen <stop> menjadi parent dari <animate>.
- Elemen <stop> pada Gradient dapat ditulis tanpa atribut.
- Jumlah elemen hanya satu.

Membuat Gradient Animation Pada Icon SVG

<!-- Infinite Gradient Animation SVG Fill Color -->
<svg viewBox='0 0 24 24'>
  <path fill='url(#gradientAnimationIcon)' d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
  <defs>
    <linearGradient id='gradientAnimationIcon' x1='0%' y1='0%' x2='100%' y2='0%'>
      <stop>
        <animate attributeName="stop-color" values='#01FF89; #7A5FFF; #01FF89' dur='4s' repeatCount='indefinite'/>
      </stop>
    </linearGradient>
  </defs>
</svg>
Penjelasan terkait tag dan atribut dari defs, linearGradient, dan stop bisa dilihat pada artikel sebelumnya. Gradient Icon SVG
AtributKeterangan
attributeNameNilai attributeName menggantikan atribut stop-ofset pada tag stop.
valuesNilai values berisi kumpulan modul warna, dipisah dengan semicolon ;.
durNilai dur adalah durasi animasi pada ikon.
repeatCountNilai repeatCount mendefinisikan jumlah waktu gradient berjalan. Dapat diisi dengan angka (min 1) atau indefinite yang artinya animasi gradient akan terus berjalan.
tambahanTambahkan atribut stop-color='warna' pada elemen <stop> ketika repeatCount bukan bernilai indefinite.
Demo Gradient Animation SVG
Hanya contoh sederhana, silahkan Anda kreasikan agar menjadi lebih keren.

Referensi:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate