Hal-Hal Keren yang Bisa Dibuat dengan SVG

 (fuma-nama.vercel.app)
3 poin oleh GN⁺ 2025-04-13 | 2 komentar | Bagikan ke WhatsApp
  • SVG bukan sekadar format ikon sederhana; dengan menggabungkan mask, path, dan animasi CSS, kita bisa membuat efek wire yang mengalir mengikuti garis serta highlight TOC
  • Implementasi intinya bukan menampilkan garis yang dibuat dengan line atau path secara langsung, melainkan memakainya sebagai area mask untuk membatasi area tampil blok animasi
  • Animated Wires menerapkan mask="url(#...)" pada rect dan menggerakkan translateY dengan @keyframes, lalu memperluas gaya visual dengan linearGradient dan variabel CSS
  • TOC bergaya Clerk di Fumadocs, karena kompatibilitas SSR, merender outline di server dan merender thumb yang menunjukkan posisi aktif di klien dengan memanfaatkan informasi posisi dari browser
  • Atribut d pada SVG <path> bukan string yang dibuat otomatis, melainkan daftar perintah, sehingga gambar mask dengan bentuk yang sama seperti outline TOC yang dirender di server dapat direkonstruksi di klien

Animated Wires dengan SVG Mask

  • Kode contoh didasarkan pada sintaks JSX atau React, bukan HTML biasa
  • Garis dasar dapat dibuat dengan line atau path pada SVG
    • Dalam contoh, sebuah line vertikal ditempatkan di dalam viewBox="0 0 50 50"
  • Alih-alih menggambar garis langsung ke layar, garis tersebut digunakan sebagai mask untuk membatasi area yang terlihat dari bentuk lain
    • rect diberi mask="url(#line)", dan di dalam mask diletakkan line berwarna putih
  • Gerakan dibuat dengan menerapkan CSS animation pada rect
    • @keyframes to-down bergerak dari translateY(-10px) ke translateY(50px)
  • Gaya visual diperluas dengan menggabungkan garis latar, garis mask yang lebih tebal, linearGradient, dan variabel CSS --height
    • @keyframes to-down-2 bergerak dari calc(var(--height) * -1) ke 100%
  • Sebagian besar efek serupa menggunakan pendekatan memotong blok animasi dengan mask
    • Beberapa desain bisa dibuat di Figma atau editor SVG lainnya
    • Landing page Unkey adalah contoh pendekatan ini

TOC Bergaya Clerk di Fumadocs

  • Fumadocs memiliki daftar isi (TOC) bergaya Clerk
  • Agar kompatibel dengan SSR, outline TOC harus dirender di server tanpa JavaScript klien
    • Di server, posisi elemen yang presisi tidak dapat diketahui
    • Implementasinya memakai posisi absolute, lalu merender outline seperti beberapa komponen terpisah dan menyambungkannya
  • Bagian outline yang sesuai dengan item aktif atau heading yang terlihat di viewport ditampilkan sebagai thumb
    • Karena thumb harus dianimasikan, mengganti warna komponen outline saja tidak cukup
    • Thumb sebagai elemen interaktif dirender di klien
  • Berdasarkan informasi posisi yang diperoleh dari browser, peta mask disusun di klien
    • SVG digunakan untuk membuat peta mask ini
    • Atribut d pada SVG <path> adalah daftar perintah, dan dapat merender garis yang menghubungkan titik-titik
    • Dokumentasi terkait dapat dilihat di MDN Web Docs tentang SVG Paths
  • SVG yang dibuat dengan cara ini memiliki bentuk yang sama dengan outline TOC asli yang sudah dirender lebih dulu di server
  • Sama seperti Animated Wires, SVG dimasukkan ke CSS mask-image sebagai data URL, lalu dipakai untuk me-mask blok div yang dianimasikan agar menghasilkan thumb yang di-highlight
    • div di dalamnya menggunakan nilai seperti width: 1, height: thumb.height, transform: translateY(${thumb.top}px), transition: "all 500ms", dan backgroundColor: "white"
  • Implementasi React.js dapat dilihat di kode sumber toc-clerk.tsx

Bacaan terkait

2 komentar

 
ndrgrd 2025-04-14

Memang keren, tapi rasanya lebih mudah terlihat kalau cukup menonjolkan satu item saat ini dengan jelas.
 
GN⁺ 2025-04-13
Komentar Hacker News

  • Meski ini materi dari 8 tahun lalu, presentasi terkenal Sarah Drasner, “SVG Can Do That?”, masih membuka wawasan banyak orang
    Sejak saat itu CSS sudah berkembang sangat matang, dan saya kurang yakin apakah SVG sendiri berkembang sejauh itu, tetapi tetap sangat direkomendasikan
    Slide: https://slides.com/sdrasner/svg-can-do-that
    Video: https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte

    • Bukunya juga sangat bagus, tetapi saya tidak yakin apakah alat-alat yang direkomendasikan di sana masih relevan sekarang

  • Salah satu hal menarik yang bisa dilakukan dengan file SVG adalah memakai entity DTD inline untuk mendefinisikan konstanta bersama yang bisa dipakai di banyak bagian file
    Ada contoh yang sangat bagus di SVG pada halaman “Squares in Squares” milik David Ellsworth
    Di browser utama tidak ada masalah, tetapi beberapa alat seperti Inkscape bahkan tidak mem-parsing DTD maupun mengekspansi entity
    [0] https://kingbird.myphotos.cc/packing/squares_in_squares.html

    • “Entity” yang disebut di sini sebenarnya adalah nama mekanisme SGML/XML untuk mendefinisikan dan menggunakan ulang isi sintaks arbitrer lewat referensi entity seperti &ref
      Dalam SVG, caranya adalah menaruh shape, path, dan sebagainya di bawah defs, memberi id, lalu memakainya kembali di SVG utama, dan halaman yang ditautkan itu tampaknya juga memakai cara tersebut di tiap SVG
      Itu bukan berbagi kotak di antara beberapa gambar, karena masing-masing masuk sebagai DOM terpisah
      Saya penasaran mengapa para perancang awal SVG merasa perlu mengimplementasikan ulang mekanisme entity secara ad hoc
      Mungkin ada hubungannya dengan kemampuan menimpa properti rendering di titik penggunaan, dan saat itu SVG berada dalam arus transisi XHTML/XML di W3C, jadi kemungkinan asumsi bahwa browser akan mengabaikan definisi entity atau prolog dokumen/DOCTYPE juga belum mapan
    • Mungkin saya melewatkan sesuatu, tetapi saya tidak bisa menemukan !doctype atau !element yang menunjukkan DTD di halaman itu
      Jika yang dimaksud hanya defs dan use di SVG, itu bukan DTD
    • Anda juga bisa mengambil bagian lain dari SVG yang sudah ada lalu menggandakannya untuk dipakai di tempat lain pada halaman
      https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
    • Mungkin berfungsi di browser, tetapi banyak alat SVG mengabaikan DTD karena risiko serangan denial-of-service
      Salah satu contohnya adalah Billion laughs attack
      https://en.wikipedia.org/wiki/Billion_laughs_attack
    • Halaman itu butuh sekitar 5 detik penuh untuk dirender di iPhone SE keluaran 2022

  • “A Deep Dive Into SVG Path Commands” karya Nanda Syahrasyad sangat bagus untuk memahami bagaimana path SVG disusun
    Meski tulisan itu sudah hampir 2 tahun lalu, itu benar-benar membuka mata saya soal apa yang bisa dilakukan SVG dan bagaimana tepatnya cara kerjanya
    [0] https://www.nan.fyi/svg-paths

  • Saya pernah mengerjakan proyek yang melakukan hal menarik seperti ini dengan SVG
    Dibuat dengan React, menambahkan elemen animasi ke beberapa ilustrasi statis, dan warna dikendalikan dari CMS
    Frontend memanggil API untuk menerima gambar SVG dengan warna yang benar, dan animasinya ditangani dengan cara menyembunyikan dan menampilkan elemen SVG
    Contohnya bisa dilihat di sini: https://web.archive.org/web/20221020133516im_/https://uncrow...

  • Saya sangat merindukan Macromedia Flash
    Tidak ada teknologi lain seperti Flash dan format SWF yang memungkinkan orang menikmati begitu banyak game indie dan film animasi hanya dengan Flash Player, tanpa unduhan terpisah
    Hambatan masuknya juga sangat rendah
    SVG memang punya potensi untuk melakukan semua yang dulu dilakukan SWF, tetapi tidak punya editor seperti Flash atau pendekatan pemrograman berbasis scene/object seperti ActionScript
    Ada juga keanehan antar-browser, jadi hanya SVG yang sederhana saja yang bisa dijamin tampil benar di mana-mana

    • Sekarang masih ada sebagai Adobe Animate dan bisa diekspor ke HTML
      Sejak awal, membandingkan SVG dengan Flash terasa seperti membandingkan apel dan jeruk
      Format SVG sendiri tidak harus langsung melakukan semua yang dulu dilakukan Flash, karena bisa bergantung pada teknologi lain di dalam browser
    • Menurut saya WebAssembly bisa jadi perbandingan yang lebih tepat
      Misalnya Unity, Unreal, dan Godot bisa dikompilasi untuk browser dengan cukup mudah
      Masalahnya, aplikasi seperti ini cenderung membengkak dan biasanya bukan berukuran satu digit MB, melainkan puluhan MB
    • Sepertinya ada peluang startup untuk membuat ulang ini

  • SVG animasi yang kompleks memang menyenangkan untuk dimainkan, tetapi kalau sudah masuk terlalu dalam ke SMIL, Safari bisa membuat ponsel macet hanya karena satu angka 0 di depan bilangan pecahan hilang, dan berbagai hal aneh lainnya bisa terjadi

  • Jika Anda membuat hal-hal SVG dinamis yang kreatif dengan JavaScript dan sedang mencari pekerjaan, silakan kirim DM

  • Saya penasaran apakah ada ekstensi SVG yang memungkinkan intensitas garis
    Saya punya plotter yang bisa menaikkan dan menurunkan pena, dan dijalankan dengan file SVG
    Akan bagus jika pena bisa diturunkan saat garis sedang digambar, seperti yang sering dilakukan dalam tulisan tangan
    Sebagai referensi, ini adalah Axidraw dari Evil Mad Scientist Labs, perangkat yang luar biasa dan para pembuatnya juga keren

    • Cukup mudah untuk menyimpan instruksi kustom di dalam file SVG biasa lalu menafsirkannya di pembaca
      Misalnya saya memakai laser cutter/plotter serbaguna, dan opacity dipakai untuk daya laser, ketebalan garis untuk kecepatan gerak, kanal hijau untuk jumlah pengulangan, kanal biru untuk tinggi sumbu Z, dan kanal merah untuk menurunkan pena atau mematikan laser
    • Mungkin akan lebih baik menangani hal seperti itu dengan G-code
      Saya telah mengerjakan pekerjaan semacam ini di sini
      https://github.com/WillAdams/gcodepreview

  • Sampai saya mencoba membuat ikon atau logo sendiri, saya selalu merasa aneh melihat SVG yang memiliki transform
    Sulit sekali menyesuaikan kurva dengan benar
    Setelah menyelesaikan logo kedua, tampilannya terasa terlalu datar sehingga saya ingin memiringkannya 10°, dan ketika membayangkan harus menulis ulang semua garis dan kurva itu, rotasi terasa jauh lebih masuk akal
    Untungnya, saat diletakkan di samping teks hasilnya terlihat aneh, jadi saya akhirnya mengubah sudutnya beberapa kali lagi sampai kerning-nya terlihat pas

  • Belakangan ini saya membuat game kecil untuk bersenang-senang, dan untuk rendering saya sebagian besar memakai tile SVG dengan animasi CSS: https://pipeline-panic.vercel.app/