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

1
2
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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.