CODEWITHSUNDEEP
svg-animate
personax
personax

Reputation: 135

Is there a way to use SVG <animateMotion> to make a customized polygon to follow a specific path moving?

Updated: solved.

I noticed that the circle can follow the path smoothly, but the triangle behaves differently compared to the circle. Is there a way to make the triangle move along the path smoothly as well?

Here's my pen:SVG Animation

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" style="border:1px solid blue">
    <path
  id="motionPath"
  fill="none"
  stroke="gray"
  stroke-width=2
  d="M20,50 L40,20 80,90 110,50" />

  <circle r="5" fill="red">
    <animateMotion
    dur="8s"
    repeatCount="indefinite">
    <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
    
    <polygon points="20,10 10,20 30,20" fill="red" transform="translate(-20, -16.67)">
  <animateMotion
  dur="8s"
  repeatCount="indefinite">
  <mpath xlink:href="#motionPath"/>
  </animateMotion>
  </polygon>
</svg>

Upvotes: 0

Views: 25

Answers (0)

Related Questions