Skip to content

Instantly share code, notes, and snippets.

@bendc
Created August 25, 2017 10:28
Show Gist options
  • Save bendc/6bd03548b96ab9d11ed19c8f9cbb25d5 to your computer and use it in GitHub Desktop.
Save bendc/6bd03548b96ab9d11ed19c8f9cbb25d5 to your computer and use it in GitHub Desktop.
rAF tutorial: SVG morphing
// 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(" "));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment