SVG ANIMATION

This was for Andi. woot.

by Chris LaFrombois

HTML

<div id="flex">
    <div class="wrap">
        <div class="text">
            <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
        </div>
        <div class="svg" id="svg-1">
            <svg viewBox="0 0 300 300">
                <polygon fill="#FFD41D" points="0,103 300,0 300,300 0,300">
                    <animate class="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,0 300,103 300,300 0,300" />
                    <animate class="animation-to-green" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>
                    <animate class="animation-to-star" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,103 300,0 300,300 0,300" />
                    <animate class="animation-to-yellow" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"></animate>
                </polygon>
            </svg>
        </div>
        <!-- svg -->
    </div>
    <!-- wrap -->
    <div class="wrap">
        <div class="text">
            <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
        </div>
        <div class="svg" id="svg-1">
            <svg viewBox="0 0 300 300">
                <polygon fill="#FFD41D" points="0,103 300,0 300,300 0,300">
                    <animate class="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,0 300,103 300,300 0,300" />
                    <animate class="animation-to-green" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>
                    <animate class="animation-to-star" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,103 300,0 300,300 0,300" />
                    <animate class="animation-to-yellow" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms"...

CSS

#flex {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-content:stretch;
}
.wrap {
    display:flex;
    position:relative;
    padding:0 15px;
}
.text {
    position:relative;
    z-index:4;
}
.svg {
    position:absolute;
    top:0;
    right:15px;
    bottom:0;
    left:15px;
    z-index:1;
}

JavaScript

var atc = $('.animation-to-check'),
    atg = $('.animation-to-green'),
    aty = $('.animation-to-yellow'),
    ats = $('.animation-to-star');

$('.wrap').hover(animOut, animIn);

function animIn() {
    var node_s = $(this).find(ats);
    var node_c = $(this).find(aty);
    console.log(node_s[0]);
    console.log(node_c[0]);
    node_s[0].beginElement();
    node_c[0].beginElement();
}

function animOut() {
    var node_s = $(this).find(atc);
    var node_c = $(this).find(atg);
    node_s[0].beginElement();
    node_c[0].beginElement();
}