A flame needs three sine waves

Title “A flame needs three sine waves”, tags Motion, Creative Coding, and Maths, and circles with a pencil sketch of a flame, an unlit match, and a burning match.

Carmen Ansio breaks down a canvas animation of a match, from pencil sketches to code. The flame is three teardrops drawn with quadraticCurveTo, swaying less closer to the base. One sine wave looks like a pendulum, but three at different frequencies make an organic flicker that repeats only after 21 seconds. A state machine drives the strike, burn, and gutter phases, with prefers-reduced-motion support.

carmenansio.com/articles/matchstick-flame-canvas