Latihan 1: SVG Animation — Creative Web

Latihan 1 dari materi SVG Animation di Creative Web — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat program yang menghasilkan CSS untuk animasi stroke-dasharray SVG:

  1. Buat function generateDrawAnimation(pathLength) yang mengembalikan string CSS keyframes untuk efek "drawing":

    • stroke-dasharray diset ke pathLength
    • stroke-dashoffset mulai dari pathLength (tersembunyi) ke 0 (terlihat)
    • Return format: "dasharray:PANJANG;from:PANJANG;to:0"

  2. Buat function calculateProgress(pathLength, percentage) yang menghitung stroke-dashoffset pada persentase tertentu:

    • Di 0% → offset = pathLength (tersembunyi)
    • Di 100% → offset = 0 (terlihat penuh)
    • Di 50% → offset = pathLength / 2
    • Return nilai offset (number)

Test: