SVG animation

by Ayyappan Sakthivadivel

HTML

<svg width="500" height="500" transform="translate(100 100)">
    <path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="black" fill="none" />
    <rect x="0" y="0" width="30" height="15" style="stroke: green; fill: none;">
        <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="2s" repeatCount="indefinite" />
    </rect>

</svg>

<svg width="500" height="500">
    <path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="green" fill="none" />
    <rect x="0" y="0" width="30" height="15" style="stroke: green; fill: none;">
        <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="2s" repeatCount="indefinite" />
    </rect>

</svg>