In this demo, I compose a heart from one square and two circles. Then I spiral the heart by scaling it by a factor of 0.9 and rotating it 27° every 100 milliseconds. The color of the heart changes from red to pink to purple, and then back to red again.

Instead of drawing each heart in the spiral individually, I create the spiral by copying the image from the main <canvas> into a second <canvas> that is not being displayed. I scale and rotate the context of this second <canvas> to get the effect I want, and then copy the image from the second <canvas> back into the main <canvas>. To change the color of the hearts, I create a series of colorstops. A subroutine, setHeartColor, uses those colorstops to calculate the color of the heart based on the number of the current frame. Learn more.