<!-- 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>
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.
1 Response
<?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.