Follow SVG Path - anime.js

Follow SVG Path - anime.js.markdown

Follow SVG Path - anime.js

A Pen by Adam on CodePen.

License.

index.html

<section>
  <article>
    <svg width="256" height="112" viewBox="0 0 256 112">
      <path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
      <rect fill="#ffffff" width="16" height="16" x="-8" y="-8"/>
    </svg>
  </article>
  <footer>
    <span>Made with</span> <a href="http://anime-js.com">anime.js</a>
  </footer>
  <a class="logo" href="http://anime-js.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/anime-logo.png"></img></a>
</section>

script.js

var path = anime.path('path');

anime({
  targets: 'rect',
  translateX: path,
  translateY: path,
  rotate: path,
  duration: 3000,
  loop: true,
  easing: 'linear'
});

anime({
  targets: 'path',
  opacity: 0,
  duration: 6000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutExpo'
});

scripts

<script src="http://codepen.io/juliangarnier/pen/4032af61ca0478304ab7b31b70a44804"></script>

style.css

div {
  width: 2rem;
  height: 2rem;
  margin-top: auto;
  margin-bottom: auto;
}

styles

<link href="http://codepen.io/juliangarnier/pen/34b729901a37198f5d0414728d99afb6" rel="stylesheet" />