<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Animations svg</title>
</head>

<body>
  <!--animateMotion-->
  <div class="elmt3">
    <svg version="1.1" viewBox="0 0 350 350" xmlns="http://www.w3.org/2000/svg">
      <path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:none" />
      <g>
        <circle r="10" />
        <animateMotion begin="0s" dur="10s" repeatCount="indefinite">
          <mpath xlink:href="#chemin" />
        </animateMotion>
      </g>
    </svg>
  </div>
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.