Portal Logo Ticker

by scruffles

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="390px"
     height="378px" viewBox="0 0 390 378" enable-background="new 0 0 390 378" xml:space="preserve">
<g id="plant">
    <path id="flower-left" fill-rule="evenodd" clip-rule="evenodd" fill="#5E7117" d="M222.965,187.439
        c-12.938-45.933-39.678-85.772-102.285-97.925c-6.798-1.315-13.983-1.959-21.511-2.941c-5.564,16.206-8.614,84.797,83.442,107.298
        c5.395,1.318,11.219,2.019,17.199,3.28c1.588,0.333,3.064,4.957,8.637,15.129c0,0,0.302-25.78,4.802-27.53
        S222.965,187.439,222.965,187.439z"/>
    <path id="flower-right" fill-rule="evenodd" clip-rule="evenodd" fill="#A3CA49" d="M238.635,183.235l-1.062-1.789
        c-6.293-21.998-16.305-42.816-31.637-60.057c6.716-10.919,30.967-41.113,95.556-45.645c3.134-0.224,6.376-0.392,9.733-0.474
        C314.58,75.185,306.807,165.075,238.635,183.235L238.635,183.235z"/>
    <path id="flower-middle" fill-rule="evenodd" clip-rule="evenodd" fill="#719A1A" d="M150.104,85.064
        c-0.836-4.926-1.874-28.271,32.813-76.375c1.651-2.29,3.381-4.643,5.204-7.021c9.623,5.424,34.682,31.147,45.928,63.364
        c1.424,4.106,2.488,8.194,3.104,12.196c-20.085,10.803-28.331,17.437-38.573,36.575C185.796,101.661,169.852,91.751,150.104,85.064
        L150.104,85.064z"/>
    <path id="leaf-left" fill-rule="evenodd" clip-rule="evenodd" fill="#709818" d="M182.341,364.556
        c0,0,36.406-77.456-98.142-166.365c-2.22-1.49-4.504-2.959-6.818-4.43C75.065,192.285,28.24,325.745,182.341,364.556
        L182.341,364.556z"/>
    <path id="leaf-right" fill-rule="evenodd" clip-rule="evenodd" fill="#729918"...

JavaScript

var petals = [
    $('#flower-left'),
    $('#flower-middle'),
    $('#flower-right'),
    $('#leaf-right'),
    $('#leaf-left')
    ];
var index = 0;

function next() {
    index++;
    if (index >= petals.length) index = 0;
}

/*
function fade(elm) {
    elm.animate({
        opacity: 0.25
    }, 300, function() {
        restore(elm);
    });
}

function restore(elm) {
    elm.animate({
        opacity: 1.0
    }, 300, function() {
        next();
        fade(petals[index]);
    });
}

fade(petals[index]);
*/

var speed = 100;
var prevColor = null;

function dark() {
    setTimeout(function() {
        prevColor = petals[index].css('fill');
        petals[index].css('fill', '#406800');
        recolor();
    }, speed);
}

function recolor() {
    setTimeout(function() {

        petals[index].css('fill', prevColor);
        next();
        dark();
    }, speed);
}
dark();

$('svg').width('10%').height('10%');