SVG animation

by Ayyappan Sakthivadivel

HTML

<svg width="500" height="500" transform="translate(600 600)">
   
    <circle cx="50" cy="50" r="5" fill="black" opacity="0.3">
        <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="2s" repeatCount="indefinite" />
    </circle>

</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>