Carlos Aguni

Highly motivated self-taught IT analyst. Always learning and ready to explore new skills. An eternal apprentice.

D3js Arrow Flow Particle Animate

08 Dec 2021 » 
<circle xmlns="http://www.w3.org/2000/svg" r="3.5" fill="#FF136A">
    <animateMotion dur="20s" repeatCount="indefinite" path="M895 669V642H822V358H805V310H815V342H825V310H822V224H512V184H544V180H613H493V105M493 105V176H544V180H613H512V224H822V310H815V342H825V310H835V358H822V642H895V669"/>
    <animate attributeName="fill" id="10be" begin="10bs.begin+11s" attributeType="XML" values="#305680;#FF136A" dur="0.1s" fill="freeze"/>
    <animate attributeName="fill" id="10bs" begin="4.5s;10be.begin+9s" attributeType="XML" values="#FF136A;#305680" dur="0.1s" fill="freeze"/>
</circle>

<circle r="3.5" fill="#DC9058">
    <animateMotion dur="17.5s" repeatCount="indefinite" path="M744 669V636V487H727V439H737V471H747V439H744V230H507V184H544V180H613H493V105M493 105V176H544V180H613H507V230H744V439H737V471H747V439H757V487H744V636V669"/>
    <animate attributeName="fill" id="9be" begin="9bs.begin+12.5s" attributeType="XML" values="#305680;#DC9058" dur="0.1s" fill="freeze"/>
    <animate attributeName="fill" id="9bs" begin="2.5s;9be.begin+5s" attributeType="XML" values="#DC9058;#305680" dur="0.1s" fill="freeze"/>
</circle>

https://oreillymedia.github.io/Using_SVG/ch19-animation-files/