CodePen Embed - SVG - animation

<svg id="mySvg" width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      outline: 1px solid red;
    }
  </style>
  <circle id="myCircle" cx="60" cy="10" r="10">
    <animate attributeName="cx" dur="4s" repeatCount="indefinite" values="60; 110; 60; 10; 60" keyTimes="0; 0.25; 0.5; 0.75; 1" begin="myCircle.click" end="mySvg.click" />
    <animate attributeName="cy" dur="4s" repeatCount="indefinite" values="10; 60; 110; 60; 10" keyTimes="0; 0.25; 0.5; 0.75; 1" begin="myCircle.click" end="mySvg.click" />
  </circle>
</svg>

This Pen is owned by iflyit on CodePen.

See more by @iflyit on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.