<div class="container">
   <svg id="centered" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path id="target"/>
   </svg>
</div>
body {
   overflow: hidden;
}

.container {
   display: flex;
   height: 100vh;
   width: 100vw;
   justify-content: center; 
   align-items: center;
}

#centered { 
   width: 200px;
   height: 200px;
}

#centered svg {
   width: 100%;
}
var t1 = just.animate({
   targets: "#target",
   duration: 4000, 
   props: {
      d: {
         value: [
            'M3 22v-20l18 10-18 10z',
            'M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z',
            'M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z', 
            'M4 0l16 12.279-6.951 1.17 4.325 8.817-3.596 1.734-4.35-8.879-5.428 4.702z',
         ], 
         interpolate(left, right) {
            return flubber.interpolate(
               left, 
               right, { maxSegmentLength: 0.3 }
            )
         }
      },
      fill: {
         value: ['black', 'red', 'blue',  'hsl(128, 50%, 50%)'],
         interpolate: just.mix.colors
      }
   }
})    

t1.play({ repeat: Infinity, alternate: true });

just.tools.player(t1);
View Compiled
Run Pen

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.2.0/just-animate.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.2.0/just-animate-tools.min.js
  3. https://unpkg.com/flubber@0.4.0
  4. https://unpkg.com/just-mix@0.3.3/dist/just-mix.js