Animasi SVG Navbar

Hei, aku baru saja membuat animasi svg dan aku taruh di bagian navbar.

Alasan

Hal ini karena aku sebenarnya aku ga tahu lagi mau melakukan apa, sehingga aku memutuskan untuk membaca blog milik mas Anthony Fu lagi. Sebenarnya aku sudah lama tahu bahwa di website tersebut ada animasi svg dan waktu itu aku belom ingin membuatnya. Tapi karena aku hari ini sedang tidak tahu lagi ingin melakukan apa, maka aku mencoba mengikuti tutorial dari blog itu dan juga mengucapkan terima kasih karena telah memberikan cara membuatnya dan menganimasikannya. Selain blog tersebut juga ada referensi lain jika kalian ingin membuat animasi svg seperti itu, berikut adalah referensinya:

• Animated SVG Logo oleh Anthony Fu, yang merupakan referensi utama untuk aku membuat animasi svg

• How SVG Line Animation Works oleh Chris Coyier

• Animated line drawing in SVG oleh Jake Archibald

Sebenarnya kalian bisa membaca semua referensi itu jika kalian tertarik, tapi jika kalian ingin lebih cepat maka cukup baca referensi Animated SVG Logo oleh Anthony Fu menurutku udah cukup karena disitu udah jelas dan terdapat code animasinya

Cara Aku Membuat

Setelah aku membaca blog-blog tersebut, aku langsung membua figma dan mencoba mencari inspirasi kira-kira simbol atau huruf apa yang cocok untuk kasusku ini, di dalam benakku terdapat 2 pilihan yang pertama huruf 'ɑ' seperti ini dan simbol bintang. Keduanya memiliki kesamaan arti yaitu 'A' yang merupakan huruf depan dari "Abdian". Lalu setelah aku pertimbangkan, aku lebih cocok ke simbol bintang karena jika aku memakai huruf 'ɑ' maka mirip seperti milik mas Anthony Fu sehingga aku mencari alternatif lain dan memilihlah simbol bintang. Dari situ aku langsung mulai membuat design baru di figma, mengklik huruf 'p' di keyboard untuk shortcut 'pen'. Kemudian aku mulai membuat simbol bintang dan ketika sudah selesai dan ingin hasilnya tidak terlalu tebal maka aku membuat mask dengan cara aku duplikat simbol bintang tadi, lalu aku beri fill lalu aku pilih 'Use as mask' di sidebar kanan kemudian susunanya seperti gambar berikut:

Tinggal aku sesuaikan aja supaya tidak terlalu tebal. Setelah aku merasa sesuai maka aku tinggal eksport as SVG.

Setelah itu aku tidak langsung mengimplementasikannya ke kode webku ini tapi aku coba eksperimen dulu dengan membuat file html dan css. Untuk file cssnya isinya yaitu ini, ini aku dapat dari blog milik mas Anthony Fu:

@media (prefers-reduced-motion) {
  path {
    animation: none !important;
    stroke-dasharray: unset !important;
  }
}
@keyframes grow {
  0% {
    stroke-dashoffset: 1px;
    stroke-dasharray: 0 350px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    stroke-dasharray: 350px 0;
  }
  /* Moving back */
  85% {
    stroke-dasharray: 350px 0;
  }
  95%,
  to {
    stroke-dasharray: 0 350px;
  }
}
path {
  stroke-dashoffset: 1px;
  stroke-dasharray: 350px 0;
  animation: grow 10s ease forwards infinite;
  transform-origin: center;
  stroke: #ffffff;
  animation-delay: 0s;
}

Dari situ, aku merasa svgku kurang sesuai karena masih terlalu tebal sehingga aku membuat lagi di figma. Setelah sudah sesuai aku eksport kembali dan aku eksperimen lagi, di sini aku bingung dengan hasilnya, karena tampilan hasilnya itu beda dengan apa yang aku buat di figma.

Ini yang aku buat di figma:

Kemudian di bawah ini hasilnya:

Terlihat bukan perbedaanya, aku coba buat svg ulang lagi dan eksperimen kembali tapi masih tetap sama saja, lalu aku juga mencari solusi di internet untuk hal ini tetapi juga belum ada yang dapat menyelesaikan masalahku ini, mungkin jika kalian ada solusi bisa kabari aku. Dan untungnya svgku yang pertama tadi ketika aku eksperimen dengan html dan css itu sesuai, hanya saja animasinya kurang mulus dan berantakan karena itu adalah eksperimen pertamaku membuat svg jadi hasilnya tidak serapi eksperiman selanjutnya, tapi uniknya dia sesuai ketika aku eksperimen dengan html + css. Berikut buktinya:

Karena aku tidak ingin membuang waktu lagi, maka aku langsung memilih yang aku lingkari itu untuk aku implmntasikan ke kode webku ini.

Sehingga aku cukup puas dengan hasil akhirnya:

Mungkin itu saja yang aku ingin bagikan kali ini, semoga kalian menikmati tulisanku ini, terima kasih.