SVGAnimEditor

source in gitlab!

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="350" version="1.1">
    <line x1="100" y1="0" x2="100" y2="100"  style="stroke:black;stroke-width:2" />
    <line x1="50" y1="200" x2="100" y2="100"  style="stroke:black;stroke-width:2" />
    <line x1="150" y1="200" x2="100" y2="100"  style="stroke:black;stroke-width:2" />
   <line x1="50" y1="200" x2="50" y2="300"  style="stroke:black;stroke-width:2" />
   <line x1="50" y1="200" x2="150" y2="300"  style="stroke:black;stroke-width:2" />
   <line x1="150" y1="200" x2="150" y2="300"  style="stroke:black;stroke-width:2" />
   <text x="50" y="320" text-anchor="middle" fill="#008800" font-size="20px" font-family="Arial" dy=".3em">1</text>
   <text x="150" y="320" text-anchor="middle" fill="#888888" font-size="20px" font-family="Arial" dy=".3em">0</text>
    <circle cx="100" cy="100" r="20" fill="#aeaeae" />
    <text x="100" y="100" text-anchor="middle" fill="black" font-size="20px" font-family="Arial" dy=".3em">et</text>
    <circle cx="50" cy="200" r="20" fill="#aeaeae" />
    <text x="50" y="200" text-anchor="middle" fill="black" font-size="20px" font-family="Arial" dy=".3em">ou</text>
    <circle cx="150" cy="200" r="20" fill="#aeaeae" />
    <text x="150" y="200" text-anchor="middle" fill="black" font-size="20px" font-family="Arial" dy=".3em">non</text>

<circle cx="50" cy="300" r="5" style="stroke: none; fill: #008800;"/>
<circle cx="150" cy="300" r="5" style="stroke: none; fill: #888888;"/>

<circle cx="50" cy="300" r="5" style="stroke: none; fill: #008800;">
    <animate attributeName="cy" attributeType="XML"
             from="300"  to="220"
             begin="0s" dur="2s"
             fill="remove"/>
</circle>
<circle cx="150" cy="300" r="5" style="stroke: none; fill: #888888;">
    <animate attributeName="cy" attributeType="XML"
             from="300"  to="220"
             begin="0s" dur="2s"
             fill="remove"/>
</circle>
<circle cx="150" cy="300" r="5" style="stroke: none; fill: #888888;">
<animate attributeName="cx" attributeType="XML"
             from="150"  to="70"
             begin="0s" dur="2s"
             fill="remove"/>
    <animate attributeName="cy" attributeType="XML"
             from="300"  to="220"
             begin="0s" dur="2s"
             fill="remove"/>
</circle>

<circle cx="1500" cy="200" r="5" style="stroke: none; fill: #008800;">
<animate attributeName="cx" attributeType="XML"
             from="140"  to="110"
             begin="2s" dur="2s"
             fill="remove"/>
<animate attributeName="cy" attributeType="XML"
             from="180"  to="120"
             begin="2s" dur="2s"
             fill="remove"/>
</circle>
<circle cx="1500" cy="200" r="5" style="stroke: none; fill: #008800;">
<animate attributeName="cx" attributeType="XML"
             from="60"  to="90"
             begin="2s" dur="2s"
             fill="remove"/>
<animate attributeName="cy" attributeType="XML"
             from="180"  to="120"
             begin="2s" dur="2s"
             fill="remove"/>
</circle>

<circle cx="100" cy="1000" r="5" style="stroke: none; fill: #008800;">
<animate attributeName="cy" attributeType="XML"
             from="80"  to="10"
             begin="4s" dur="2s"/>
</circle>
</svg>