rAF tutorial: SVG morphing

raf-svg-morphing.js

// polygon's points
const shapes = {
  play: [85, 70, 180, 125, 180, 125, 85, 180],
  stop: [85, 85, 165, 85, 165, 165, 85, 165]
};

const tick = now => {
  // calculate the current position of each point
  const points = shapes.play.map((start, index) => {
    const end = shapes.stop[index];
    const distance = end - start;
    const point = start + easing * distance;
    return point;
  });

  // update the points attribute
  element.setAttribute("points", points.join(" "));
};