Движение контура по кривой

255

27 сентября 2017, 12:41

Задача состоит в том, чтобы часть выделенная красным цветом двигалась по по основной траектории http://joxi.ru/gmvOPW3fxwb4j2 . Реализовать это пробовал различными способами через svg, но не получилось. Возможно это можно реализовать через canvas.

Пример моего кода:

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
     <meta charset="UTF-8">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<article class="rel" role="article">
     <style>
          path {
               stroke: rgb(0, 0, 0);
               fill: #fff;
          }
          path {
               animation: dash 2s linear;
               animation-fill-mode: forwards;
               animation-iteration-count: infinite;
               stroke-dasharray: 100, 1066;
               stroke-dashoffset: 0;
          }
          @keyframes dash {
               to {
                    stroke-dashoffset: 1066;
                    stroke-dasharray: 100, 966;
               }
          }
     </style>
     <div class="wrapper">
          <svg id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="370px" height="460px" viewBox="0 0 370 460" style="enable-background:new 0 0 370 460;" xml:space="preserve">
               <style type="text/css">
                .st0{fill:none;}
               </style>
               <path class="st0" d="M4.9,6c120,0,240,0,360,0c0.3,153.9,0.3,296.4-0.1,450c-8.2,0-16.5-0.2-24.7-0.2"/>
          </svg>
     </div>
</article>
</body>
</html>