<div id="anime-demo">

  <svg width="600" height="450">
    <polygon points="143 31 21 196 286 223" fill="#ED6E46" />
  </svg>
</div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}
var morphing = anime({
  targets: 'polygon',
  points: [
    { value: '143 31 21 196 286 223' },
    { value: '243 31 21 196 286 223' },
    { value: '243 31 121 196 286 223' },
    { value: '243 31 121 196 386 223' },
    { value: '543 31 121 196 386 223' }
  ],
  easing: 'linear',
  duration: 4000,
  direction: 'alternate',
  loop: true
});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js