Move circle along a motion path - animateMotion | SVG | HTML

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <!-- Path - Quadratic bézier curve --> <path d="M 10 10 q 140 280 280 0" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/> <!-- Circle which will be moved along the motion path. --> <circle cx="" cy="" r="5" fill="#212121"> <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath"/> </animateMotion> </circle> </svg>
Move circle along a motion path. jsFiddle example: https://jsfiddle.net/8gkkbrbm/

1 Response

Thanks, I made a fun wacky tube slide:

<?xml version="1.0"?>
<svg width="400" height="400"
xmlns=" http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink=" http://www.w3.org/1999/xlink" >

<!-- Path - Quadratic bézier curve -->
<path d="M 50 50 q 140 390 390 140"
stroke="pink" stroke-width="50"
fill="none" id="theMotionPath"/>

<!-- Circle which will be moved along the motion path. -->
<circle cx="" cy="" r="30" fill="#ff9933">
<animateMotion dur="1s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.