Как сделать анимацию кулачкового механизма?

render();

function render(){

    // Описание путей диска с кулачками (cam) и игольчатого толкателя (kernel)
    const cam_path = 'M-39.89 -11.27c0.39,-2.73 7.4,-8.97 12.47,-11.7 3.9,-2.33 13.25,-3.89 13.25,-3.89 2.34,-1.95 13.64,-16.37 23,-18.71 8.18,-1.95 23.38,-5.85 25.33,-3.9 4.29,5.85 8.19,22.22 3.9,36.25 -1.56,4.68 -3.9,10.52 -7.01,15.2 -1.95,3.12 -5.46,5.46 -7.8,8.58l-1.95 3.5c0,0 -1.56,4.68 -1.56,7.41 0,7.8 -3.51,14.03 -7.79,19.1 -3.9,4.68 -12.48,10.13 -15.21,9.35 -2.33,-0.39 -8.18,-7.01 -10.91,-11.69 -5.07,-8.18 -8.57,-14.81 -9.35,-26.89 0,-1.56 -7.41,-5.46 -10.14,-8.97 -2.73,-3.9 -6.62,-10.52 -6.23,-13.64l0 0z';
    const kernel_path = 'M-4 -70c2.67,0 5.33,0 8,0 0,21.54 0,43.08 0,64.62 -1.34,1.79 -2.67,3.58 -4,5.38 -1.33,-1.8 -2.67,-3.59 -4,-5.38 0,-21.54 0,-43.08 0,-64.62z';

    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    const w = canvas.width = 600;
    const h = canvas.height = 190;

    const cam = new Path2D(cam_path);       // Путь кулачка
    const kernel = new Path2D(kernel_path); // Путь толкателя
    
    let angle = 0;  // Угол вращения сцены (для кулачка)      
    
    animate();      // Функция будет вызывать сама себя на каждом кадре (помещать в очередь на отрисовку)
    
    function animate(){
        ctx.clearRect(0,0,w,h);                 // Очистка холста
    
        ctx.save();                            // Сохраняем настройки контекста
        ctx.translate(w/2, 129);               // Центр вращения
        ctx.rotate(angle * Math.PI/180);       // Вращаем полотно
        ctx.fillStyle = 'rgb(128, 128, 177)';  // Указываем стиль заливки
        ctx.fill(cam);                         // Заливаем путь кулачка
        ctx.stroke(cam);                       // Контур кулачка

        ctx.beginPath();                       // Внешняя окружность (вал?)
        ctx.arc(0,0,60,0,Math.PI*2,true);
        ctx.strokeStyle = 'rgb(100,0,180)';
        ctx.stroke();
      
        ctx.beginPath();                       // Шток (ось)
        ctx.arc(0,0,16,0,Math.PI*2,true);
        ctx.fillStyle = 'grey';
        ctx.strokeStyle = 'black';
        ctx.fill();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0,0,10,0,Math.PI*2,true);
        ctx.stroke();

        ctx.fillStyle = 'black';                // Шпонка
        ctx.fillRect(7,-2,6,4);

        angle = angle%360 + 2;                  // Изменение угла за кадр

        let kernel_position = 0                 // Позиция кончика толкателя (инициализируем 0)
        while(!ctx.isPointInStroke(cam,w/2,kernel_position)){   // Пока точка не совпадет с контуром кулачка
            kernel_position++;                                  // Добавляем к позиции по Y
        }
        ctx.restore();                          // Возвращаем настройки контекста (translate, rotate, fillStyle, strokeStyle)
        
        ctx.save();
        ctx.translate(w/2, kernel_position);    // Позиция кончика толкателя
        ctx.fillStyle = 'red';
        ctx.fill(kernel);                       // Заливка толкателя
        ctx.stroke(kernel);                     // Контур толкателя
        ctx.restore();
        
        requestAnimationFrame(animate);         // Помещаем в очередь на отрисовку на следующем кадре
    }
}

    <canvas></canvas>