SVG Animation

SVG (Scalable Vector Graphics) bisa dianimasikan dengan tiga cara: SMIL (animate element bawaan SVG), CSS animation, dan JavaScript. Masing-masing punya kelebihan sendiri.

SMIL Animation — Animate Element

SMIL (Synchronized Multimedia Integration Language) memungkinkan animasi langsung di dalam markup SVG:

<svg width="400" height="200">
  <!-- Lingkaran yang bergerak -->
  <circle cx="50" cy="100" r="30" fill="#3498db">
    <animate
      attributeName="cx"
      from="50" to="350"
      dur="2s"
      repeatCount="indefinite"
      fill="freeze"
    />
  </circle>
</svg>

Elemen <animate> ditempatkan di dalam elemen yang ingin dianimasikan.

Atribut penting:

• attributeName — properti SVG yang dianimasikan
• from / to — nilai awal dan akhir
• dur — durasi animasi
• repeatCount — berapa kali diulang (indefinite = terus menerus)
• fill — apa yang terjadi setelah animasi selesai (freeze = tetap di posisi akhir)

Animasi Warna dan Transform

<svg width="400" height="200">
  <!-- Animasi warna -->
  <rect x="50" y="50" width="100" height="100" fill="#3498db">
    <animate
      attributeName="fill"
      values="#3498db;#e74c3c;#2ecc71;#3498db"
      dur="3s"
      repeatCount="indefinite"
    />
  </rect>

  <!-- Animasi transform (rotasi) -->
  <rect x="250" y="50" width="60" height="60" fill="#9b59b6">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 280 80"
      to="360 280 80"
      dur="2s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

<animateTransform> khusus untuk animasi transform (rotate, scale, translate, skewX, skewY).

CSS Animation pada SVG

Kamu juga bisa menggunakan CSS animation biasa pada elemen SVG:

<style>
  .pulse-circle {
    animation: pulse 1.5s ease-in-out infinite;
    transform-origin: center;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
  }

  .spin {
    animation: spin 3s linear infinite;
    transform-origin: center;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<svg width="400" height="200">
  <circle class="pulse-circle" cx="100" cy="100" r="40" fill="#e74c3c" />
  <rect class="spin" x="270" y="70" width="60" height="60" fill="#2ecc71" />
</svg>

Tips: transform-origin: center penting agar rotasi terjadi di tengah elemen, bukan di pojok kiri atas.

Path Morphing dengan Atribut d

Salah satu trik SVG paling keren — mengubah bentuk path secara smooth:

<svg width="400" height="200">
  <path fill="#3498db">
    <animate
      attributeName="d"
      values="
        M50,100 C50,50 150,50 150,100 C150,150 50,150 50,100;
        M50,100 C50,20 150,20 150,100 C150,180 50,180 50,100;
        M50,100 C50,50 150,50 150,100 C150,150 50,150 50,100
      "
      dur="3s"
      repeatCount="indefinite"
    />
  </path>
</svg>

Penting: Kedua path harus punya jumlah titik/command yang sama agar morphing berjalan smooth.

Stroke-Dasharray Trick — Animasi Drawing

Trik paling populer di SVG — membuat efek "menggambar garis":

<style>
  .draw-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 2s ease forwards;
  }

  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="400" height="200">
  <path class="draw-line"
    d="M50,150 Q100,50 200,100 T350,80"
    stroke="#e74c3c" stroke-width="3" fill="none" />
</svg>

Cara kerjanya:

1. stroke-dasharray: 300 — buat dash sepanjang 300px (= panjang path)
2. stroke-dashoffset: 300 — geser dash 300px (sehingga tersembunyi)
3. Animasikan stroke-dashoffset ke 0 — dash "muncul" dari awal path

Untuk mendapatkan panjang path yang tepat, gunakan JavaScript:

const path = document.querySelector("path");
const length = path.getTotalLength();
console.log(length); // gunakan nilai ini untuk dasharray

Menggambar Teks dengan Stroke Animation

<style>
  .draw-text {
    font-family: Arial;
    font-size: 72px;
    font-weight: bold;
    stroke: #2c3e50;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: draw 3s ease forwards;
  }
</style>

<svg width="400" height="100">
  <text class="draw-text" x="20" y="75">HELLO</text>
</svg>

SVG animation sangat powerful untuk logo animation, icon transition, loading indicator, dan efek visual di landing page!