SVG Dataflow

by balefrost

HTML

<svg width="200" height="300">

<defs>
    <marker id="arrow" viewBox="-5 -10 20 20" orient="auto">
        <polygon points="-5,-10 15,0 -5,10 0,0" />
    </marker>
</defs>
<clipPath id="node" clipPathUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" />
</clipPath>
    
<g>
    <animate id="toRed" begin="1s;toGreen.end+1s" dur="2s" />
    <animate id="toGreen" begin="4s" dur="2s" />

    <g transform="translate(100 75)" clip-path="url(#node)">
        <rect id="rawSeconds" x="-20" y="-20" width="40" height="40" fill="green">
            <animate begin="toRed.begin" attributeName="fill" dur="0.2s" to="red" fill="freeze" />
            <animate begin="toGreen.begin" attributeName="fill" dur="0.2s" to="green" fill="freeze" />
        </rect>
    </g>
    
    <g transform="translate(50 150)" clip-path="url(#node)">
        <rect id="minutes" x="-20" y="-20" width="40" height="40" fill="green">
            <animate begin="toRed.begin + 1.5s" attributeName="fill" dur="0.2s" to="red" fill="freeze" />
            <animate begin="toGreen.begin + 1.5s" attributeName="fill" dur="0.2s" to="green" fill="freeze" />
        </rect>
    </g>
    
    <g transform="translate(150 150)" clip-path="url(#node)">
        <rect id="seconds" x="-20" y="-20" width="40" height="40" fill="green">
            <animate begin="toRed.begin + 0.5s" attributeName="fill" dur="0.2s" to="red" fill="freeze" />
            <animate begin="toGreen.begin + 0.5s" attributeName="fill" dur="0.2s" to="green" fill="freeze" />
        </rect>
    </g>
    
    <g transform="translate(100 225)" clip-path="url(#node)">
        <rect id="formattedMinutes" x="-20" y="-20" width="20" height="40" fill="green">
            <animate begin="toRed.begin + 2s" attributeName="fill" dur="0.2s" to="red" fill="freeze" />
            <animate begin="toGreen.begin + 2s" attributeName="fill" dur="0.2s" to="green" fill="freeze" />
        </rect>
        <rect id="formattedSeconds" x="0" y="-20" width="20"...

CSS

svg {
    border: 1px solid green;  
}

JavaScript

function toRedEnd() {
    console.log('toRedEnd');
}