SVG - TriColor Gradients

Fiddle based on the tri-color gradient example given in Chapter 3 (pg 70) of David Dailey's (et al) book [Building Web Applications with SVG (Developer Reference)](http://amzn.com/0735660123).

by brady houseknecht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css">
<svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" class="enter-stage-south">
    <linearGradient id="r">
        <stop offset="0" stop-color="red" />
        <stop offset=".5" stop-color="yellow" />
        <stop offset="1" stop-color="green" />
    </linearGradient>
    <linearGradient id="t" gradientTransform="rotate(90,.5,.5)">
        <stop offset="0" stop-color="#008" />
        <stop offset=".4" stop-color="cyan" stop-opacity="0" />
        <stop offset=".6" stop-color="cyan" stop-opacity="0" />
        <stop offset="1" stop-color="#22a" />
    </linearGradient>
    <linearGradient id="s" gradientTransform="rotate(45,.5,.5)">
        <stop offset="0" stop-color="#008" />
        <stop offset=".45" stop-color="red" stop-opacity="0" />
        <stop offset=".55" stop-color="green" stop-opacity="0" />
        <stop offset="1" stop-color="#22a" />
    </linearGradient>
    <rect x="10" y="10" height="100" width="100" fill="url(#r)" />
    <rect x="120" y="10" height="100" width="100" fill="url(#t)" />
    <rect x="230" y="10" height="100" width="100" fill="url(#s)" />
    <rect x="120" y="120" height="100" width="100" fill="url(#r)" />
    <rect x="120" y="120" height="100" width="100" fill="url(#t)" />
    <rect x="120" y="120" height="100" width="100" fill="url(#s)" />
</svg>

CSS

.enter-stage-south {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slide-up;
    -webkit-animation-name: slide-up;
}

@-moz-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

@-webkit-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

JavaScript

$(document).ready(function () {
    $('#canvas').height(window.innerHeight);
});