SVG Dataflow

by balefrost

HTML

<svg id="withoutDirty" 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>
    <clipPath id="node" clipPathUnits="objectBoundingBox">
        <circle cx="0.5" cy="0.5" r="0.5" />
    </clipPath>
</defs>
    
<line x1="100" y1="0" x2="100" y2="43.75" marker-end="url(#arrow)" stroke="black" stroke-width="5" />
<line x1="100" y1="75" x2="67.334" y2="123.998" marker-end="url(#arrow)" stroke="black" stroke-width="5" />
<line x1="100" y1="75" x2="132.666" y2="123.998" marker-end="url(#arrow)" stroke="black" stroke-width="5" />
<line x1="50" y1="150" x2="82.666" y2="198.998" marker-end="url(#arrow)" stroke="black" stroke-width="5" />
<line x1="150" y1="150" x2="117.334" y2="198.998" marker-end="url(#arrow)" stroke="black" stroke-width="5" />
<line x1="100" y1="225" x2="100" y2="288.75" marker-end="url(#arrow)" stroke="black" stroke-width="5" />

<g clip-path="url(#node)" transform="translate(100,-15)">
    <rect x="-10" y="-10" width="20" height="20" fill="red">
        <set begin="withoutDirtyStart.begin" attributeName="fill" to="red" />
        <set begin="withoutDirtyStart.begin+1.5s" attributeName="fill" to="green" />
        <set begin="withoutDirtyStart.begin+2.5s" attributeName="fill" to="red" />
        <set begin="withoutDirtyStart.begin+6s" attributeName="fill" to="green" />
        <set begin="withoutDirtyStart.begin+7.5s" attributeName="fill" to="red" />
        <set begin="withoutDirtyStart.begin+8s" attributeName="fill" to="green" />
    </rect>
    <rect x="0" y="-10" width="10" height="20" fill="red">
        <set begin="withoutDirtyStart.begin" attributeName="fill" to="red" />
        <set begin="withoutDirtyStart.begin+6s" attributeName="fill" to="green" />
    </rect>

    <animateTransform id="withoutDirtyStart" begin="indeterminite" dur="0.5s" attributeName="transform" type="translate" from="100,-15" to="100,75" fill="freeze" />
   ...

JavaScript

document.querySelector('#withoutDirty').addEventListener("click", function() {
    document.querySelector('#withoutDirtyStart').beginElement();
});