BaibaLaben “logoa” sortzerakoan animazio pixkat gehitzea okurritu zait eta era sinpleena zuzenean svg irudi bat javascript bidez eraldatzea dela dirudi, animazioa dinamikoa izan dadin.
Gaur egungo nabigatzaileek aukera ugari ematen dizkigute eta gauza sinple xamarrak egin nahi badira ez da beste JavaScript koderik behar (Snap.svg, svg.js, Raphaël… ).

Openclipart-en erlenmeyer matraze baten irudi bektoriala topatu det eta Inkscape-rekin likidoa gehitu diot. Kapa bakoitzari ID propioa ezarri diet, container eta fill, fill da likidoa. Irudia webgunera igo eta html-a gehitu:

<object id="erlenmeyer" type="image/svg+xml" data="/BLABLABLAB/erlenmeyer.svg"></object>

Honela irudia azalduko zaigu. JavaScript-aren txanda, ikusi zeinen erreza den:

// JavaScript erabiliko degu #erlenmeyer objektua atzitzeko
var erlenmeyer = document.getElementById("erlenmeyer");
// objektuaren edukia hartu
var erlenmeyerEdukia = svg.contentDocument;
// eduki hortatik 'fill' izena eman diogun kapa hartu
fill = erlenmeyerEdukia.getElementById("fill");
// eta (kasu hontan) CSS bidez kolorea aldatu
fill.style.fill = "#FFFFFF";

Erlenmeyer matrazearen likidoaren kolorea aldatu degu! CSS balioak erabili ditzakegu kolorea animatzeko. Nik [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) erabiliz funtzio sinple bat sortu det hor goian ikusi daiteken efektua lortzeko ;)

onload atributua gehitu diot svg objektuari, irudia kargatzerakoan animazioa abiaraziko du:

<object onload="initErlenmeyer()" data="/BALBALABLAB/erlenmeyer.svg" type="image/svg+xml" id="erlenmeyer"></object>

Eta hona JavaScript kolore animazio sinplea:

// nabigatzaile ezberdinen 'requestAnimationFrame' orokortu
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var fill = null,
r = Math.floor(Math.random() * 254) + 1,
g = Math.floor(Math.random() * 254) + 1,
b = Math.floor(Math.random() * 254) + 1,
rd = 1,
gd = 1,
bd = 1;

// hau da #erlenmeyer irudia kargatzerakoan (onload) jaurtitzen den funtzioa
function initErlenmeyer(){
        var svg = document.getElementById("erlenmeyer");
        var erlenmeyerEdukia = svg.contentDocument;
        fill = erlenmeyerEdukia.getElementById("fill");
        // animazioa hasi
        requestAnimationFrame(erlStep);
}

function erlStep(timestamp) {

        if(r>254||r<1) rd=-rd;
        if(b>254||b<1) bd=-bd;
        if(g>254||g<1) gd=-gd;

        r = r + (0.1*rd);
        g = g + (0.2*gd);
        b = b + (0.3*bd);

        fill.style.fill = "rgba("+parseInt(r,10)+","+parseInt(g,10)+","+parseInt(b,10)+",1)";

        requestAnimationFrame(erlStep);
}

Gauza konplexutan sartu gabe joko handia dago hemen! SVG JavaScript scripting gida bat hemen, transformazioak, gradienteak, formak… Eta erreferentzia eran erabili dedan artikulua. ANIMATU!! (JE JE JE)