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

const canvas = document.getElementById('kulak');
const ctx = canvas.getContext('2d');
const w = canvas.width = 300;
const h = canvas.height = 220;

const rx = 280;
const ry = 90;

const kulak = new Path2D('M 0 0 a 360 360 39 0 0 -226 -80');
const hor = new Path2D('M 0 0 h -240');

const total_angle = 39;
const total_move = 80;

const angle_inp = document.getElementById('angle');
const angle_p = document.getElementById('anglep');
angle_inp.addEventListener('change', rotate);
angle_inp.dispatchEvent(new Event('change'));

function rotate(e) {
  const angle = e.target.value;
  angle_p.innerText = angle;

  let h_move;

  if (angle > 39) {
    h_move = 0;
  } else {
    h_move = Math.pow((total_angle - angle) / total_angle, 2) * total_move;
  }

  ctx.clearRect(0, 0, w, h);

  ctx.translate(rx, ry);
  ctx.rotate(-angle * (Math.PI / 180));

  ctx.stroke(kulak);
  ctx.resetTransform();

  ctx.translate(rx, ry - h_move);
  ctx.stroke(hor);
  ctx.resetTransform();
}

body {display: flex}

<canvas id="kulak"></canvas>
<input type="range" id="angle" min="0" max="50" value="0">
<p id="anglep"></p>

const canvas = document.getElementById('kulak');
const ctx = canvas.getContext('2d');
const w = canvas.width = 400;
const h = canvas.height = 300;

const kulak = new Path2D(`M -66.24 -35.74 c11.78,-0.29 36.06,0.55 44.88,3.15 32.39,9.51 45.53,12.3 46.3,33.43 0.97,26.94 -28.59,31.18 -94.18,31.18 -65.58,0 -68.27,-10.15 -68.88,-27.35 -0.29,-8.21 2.24,-13.89 13.48,-21.89 14.75,-10.5 26.65,-17.75 58.4,-18.52zm66.18 21.58c8.28,0 15,6.72 15,15 0,8.29 -6.72,15 -15,15 -8.29,0 -15,-6.71 -15,-15 0,-8.28 6.71,-15 15,-15z`);



ctx.fillStyle = 'grey';

let angle = 0;

function rotate() {
  angle += 0.4;

  ctx.clearRect(0, 0, w, h);

  ctx.translate(w / 2, h / 2);
  ctx.rotate(angle * (Math.PI / 180));
  ctx.fill(kulak, 'evenodd');
  ctx.resetTransform();
  y = -h / 2;
  x = -w / 2;

  ctx.rotate(angle * (Math.PI / 180));

  draw: for (; y <= 0; y++) {
    for (x = -w / 2; x <= w / 2; x++) {
      if (ctx.isPointInPath(kulak, x, y)) {
        y--;
        break draw;
      }
    }

  }


  ctx.resetTransform();

  ctx.fillRect(0, h / 2 + y, w, -30);

  requestAnimationFrame(rotate);
}

requestAnimationFrame(rotate);

<canvas id="kulak"></canvas>

const solveQuadraticEquation = (a, b, c) => {
    if (a === 0) {
        if (b === 0) {
            return [];
        }
        return [-c / b];
    }
    b /= 2 * a;
    c /= 2 * a;
    const d = b * b - 2 * c;
    if (d < 0) {
        return [];
    }
    if (d === 0) {
        return [-b];
    }
    return [-b - Math.sqrt(d), -b + Math.sqrt(d)]
};

const makePoint = (x, y) => DOMPointReadOnly.fromPoint({x, y});

const dot = (dir, p) => dir[0] * p.x + dir[1] * p.y;

const makeLine = (p1, p2) => {
    const map = matrix => makeLine(
        p1.matrixTransform(matrix),
        p2.matrixTransform(matrix)
    );
    const getExtreme = dir => Math.max(dot(dir, p1), dot(dir, p2));
    return {map, getExtreme};
};

const makeCubicBezier = (p1, p2, p3, p4) => {
    const map = matrix => makeCubicBezier(
        p1.matrixTransform(matrix),
        p2.matrixTransform(matrix),
        p3.matrixTransform(matrix),
        p4.matrixTransform(matrix)
    );
    const getExtreme = dir => {
        const v1 = dot(dir, p1);
        const v2 = dot(dir, p2);
        const v3 = dot(dir, p3);
        const v4 = dot(dir, p4);
        const roots = solveQuadraticEquation(
            -v1 + 3 * (v2 - v3) + v4,
            2 * (v1 - 2 * v2 + v3),
            -v1 + v2
        ).filter(x => 0 < x && x < 1);

        const values = [v1, v4].concat(roots.map(t => {
            const t2 = t * t;
            const t3 = t * t2;
            const s = 1 - t;
            const s2 = s * s;
            const s3 = s * s2
            return s3 * v1 + 3 * (s2 * t * v2 + s * t2 * v3) + t3 * v4;
        }));
        return Math.max(...values);
    };
    return {map, getExtreme};
};

const makeArc = (theta1, theta2, c, u, v) => {
    const map = matrix => makeArc(
        theta1, theta2,
        c.matrixTransform(matrix),
        u.matrixTransform(matrix),
        v.matrixTransform(matrix)
    );
    const getExtreme = dir => {
        const value = th => dot(dir, makePoint(
            c.x + Math.cos(th) * (u.x - c.x) + Math.sin(th) * (v.x - c.x),
            c.y + Math.cos(th) * (u.y - c.y) + Math.sin(th) * (v.y - c.y)
        ));
        const inRange = th => (theta1 < theta2) ?
            (theta1 < th && th < theta2) :
            (th < theta2 || theta1 < th)
        ;
        const thetas = [theta1, theta2];
        const th = Math.atan2(
            dot(dir, makePoint(v.x - c.x, v.y - c.y)),
            dot(dir, makePoint(u.x - c.x, u.y - c.y))
        );
        if (inRange(th)) {
            thetas.push(th);
        }
        if (inRange(th + Math.PI)) {
            thetas.push(th + Math.PI);
        }
        return Math.max(...thetas.map(value));
    };
    return {map, getExtreme};
};

const convertArc = (
    rx, ry, x1, y1, x2, y2, xAxisRotation, largeArcFlag, sweepFlag
) => {
    const [px, py] = [(x1 + x2) / 2, (y1 + y2) / 2];
    if (!sweepFlag) {
        [x1, y1, x2, y2] = [x2, y2, x1, y1];
    }
    const a = Math.PI / 180 * xAxisRotation;
    const ca = Math.cos(a);
    const sa = Math.sin(a);

    const p_pp = (x, y) => {
        x -= px;
        y -= py;
        return [(ca * x + sa * y) / rx, (-sa * x + ca * y) / ry];
    };
    const pp_p = (xx, yy) => {
        xx *= rx;
        yy *= ry;
        return [px + ca * xx - sa * yy, py + sa * xx + ca * yy];
    };

    const [xx1, yy1] = p_pp(x1, y1);

    const u = Math.hypot(xx1, yy1);
    const v = (u < 1) ? Math.sqrt(1 - u * u) : 0;
    if (v === 0) {
        rx *= u; 
        ry *= u; 
    }

    const f = (largeArcFlag) ? v / u : -v / u;
    const cxx = f * -yy1;
    const cyy = f *  xx1;

    const theta1 = Math.atan2( yy1 - cyy,  xx1 - cxx);
    const theta2 = Math.atan2(-yy1 - cyy, -xx1 - cxx);

    return makeArc(
        theta1, theta2,
        makePoint(...pp_p(cxx    , cyy    )),
        makePoint(...pp_p(cxx + 1, cyy    )),
        makePoint(...pp_p(cxx    , cyy + 1))
    );
};

const parseFloats = text => {
    const m = text.match(
        /[-+]?([0-9]*\.[0-9]+|[0-9]+\.[0-9]*|[0-9]+)(e[-+]?[0-9]+)?/gi
    );
    if (m === null) {
        return [];
    }
    return m.map(parseFloat);
};

const parsePathD = (() => {
    const cmdAbsMove = (context, x, y) => {
        context.initialX = x;
        context.initialY = y;
        context.x = x;
        context.y = y;
        return undefined;
    };

    const cmdAbsHLine = (context, x) => {
        const part = makeLine(
            makePoint(context.x, context.y), makePoint(x, context.y)
        );
        context.x = x;
        return part;
    };

    const cmdRelVLine = (context, dy) => cmdAbsVLine(context, context.y + dy);

    const cmdAbsVLine = (context, y) => {
        const part = makeLine(
            makePoint(context.x, context.y), makePoint(context.x, y)
        );
        context.y = y;
        return part;
    };

    const cmdClose = context => {
        context.x = context.initialX;
        context.y = context.initialY;
        return undefined;
    };

    const cmdRelCubicBezierCurve = (context, x1, y1, x2, y2, x, y) => {
        const part = makeCubicBezier(
            makePoint(context.x     , context.y     ),
            makePoint(context.x + x1, context.y + y1),
            makePoint(context.x + x2, context.y + y2),
            makePoint(context.x + x , context.y + y )
        );
        context.x += x;
        context.y += y;
        return part;
    };

    const cmdAbsArc = (context,
        rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y
    ) => {
        let part;
        if (rx === 0 || ry === 0) {
            part = makeLine(makePoint(context.x, context.y), makePoint(x, y));
        } else {
            part = convertArc(
                Math.abs(rx), Math.abs(ry),
                context.x, context.y,
                x        , y        ,
                xAxisRotation, largeArcFlag, sweepFlag
            );
        }
        context.x = x;
        context.y = y;
        return part;
    };

    const cmdRelArc = (context,
        rx, ry, xAxisRotation, largeArcFlag, sweepFlag, dx, dy
    ) => cmdAbsArc(
        context,
        rx, ry,
        xAxisRotation, largeArcFlag, sweepFlag,
        context.x + dx, context.y + dy
    );

    const factory = {
     // 'm': cmdRelMove,
        'M': cmdAbsMove,
     // 'l': cmdRelLine,
     // 'L': cmdAbsLine,
     // 'h': cmdRelHLine,
        'H': cmdAbsHLine,
        'v': cmdRelVLine,
        'V': cmdAbsVLine,
        'z': cmdClose,
        'Z': cmdClose,
     // 'C': cmdAbsCubicBezierCurve,
        'c': cmdRelCubicBezierCurve,
     // 'S': 
     // 's': 
     // 'Q': 
     // 'q': 
     // 'T': 
     // 't': 
        'A': cmdAbsArc,
        'a': cmdRelArc
    };

    const parsePathD = d => {
        const context = {
            initialX: 0,
            initialY: 0,
            x: 0,
            y: 0
        };

        const parts = [];

        for (const c of d.match(/([mlhvzcsqta])([^mlhvzcsqta]*)/gi)) {
            const cb = factory[c[0]];
            const step = cb.length - 1;
            if (step === 0) {
                const part = cb(context);
                if (part !== undefined) {
                    parts.push(part);
                }
            } else {
                const args = parseFloats(c.substring(1));
                for (let i = 0; i < args.length; i += step) {
                    const part = cb(context, ...args.slice(i, i + step));
                    if (part !== undefined) {
                        parts.push(part);
                    }
                }
            }
        }
        return parts;
    };
    
    return parsePathD;
})();

const getExtremeNode = (dir, node) => {
    const d = node.getAttribute('d');
    const sw = parseFloat(node.getAttribute('stroke-width')) || 0;
    const parts = parsePathD(d);
    const matrix = node.getScreenCTM();
    return sw / 2 + Math.max(
        ...parts.map(part => part.map(matrix).getExtreme(dir))
    );
};

const getExtreme = (dir, root) => {
    const nodes = [...root.getElementsByTagName('path')];
    if (root.tagName === 'path') {
        nodes.push(root);
    }
    return Math.max(...nodes.map(node => getExtremeNode(dir, node)));
}

const driver = document.getElementById('driver');
const drivee = document.getElementById('drivee');
const lever = document.getElementById('lever');

const drive = () => {
    const h1 = getExtreme([0, -1], driver);
    const h2 = getExtreme([0, 1], lever );
    const y = parseFloat(drivee.getAttribute('y'));
    drivee.setAttribute('y', y - h1 - h2 + 2);
    requestAnimationFrame(drive);
};
requestAnimationFrame(drive);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 500 500">
  <svg>
    <g id="driver">
      <!-- Шарнир -->
      <path fill="grey" stroke="black" stroke-width="3" d="M344.3 197.6a49.6 49.6 0 0 1 34.4 13A57 57 0 0 1 396 251a54 54 0 0 1-17.4 36.8c-9 8.2-22 13.1-34.2 13a54.4 54.4 0 0 1-36.8-15.4A51.4 51.4 0 0 1 294 251a55.4 55.4 0 0 1 13.7-37.6 53.7 53.7 0 0 1 36.6-16z"/>
      <!-- Ось кулачка -->
      <path fill="#626262" stroke="black" stroke-width="2" d="M344.3 223.5c8.9 0 18 5.5 23.7 12.3 3.4 4.1 4.9 10 4.5 15.3-.4 6.7-3.2 13.9-8.2 18.4a27 27 0 0 1-20 6.5c-7.1-.8-13.8-5.4-18.6-10.6a24.4 24.4 0 0 1-1-31.8c4.7-5.7 12.2-10.1 19.6-10z"/>
      <!-- Кулачок -->
      <path fill="grey" stroke="black" stroke-width="3" d="M41.3 153c32.7 0 78.5 3.3 117.6 7 35 3.2 69.9 6.8 104.3 13.2 16.8 3.1 33.3 7.7 49.8 12.2 13 3.5 43.8 11.3 38.7 11.6-20 1.4-39.1 7.2-48.7 22.3-20.3 31.8-.9 54.9-7 41.8-5.4-11.8-18.1-18-29-24.3-13.4-7.9-28.7-11.9-43.5-16.5-19-5.9-38.9-9.2-58.2-14.3-21.5-5.5-42.7-12-64.1-17.4-14-3.5-26.3-5.5-41.9-9.6a25 25 0 0 1-13.2-10.6c-3-4.4-10.1-15.3-4.8-15.3z">
    
      </path>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        values="0 347 250;-30 347 250;0 347 250;-10 347 250;0 347 250"
        dur="5s"
        repeatCount="indefinite" />
    </g>
  </svg>
  <svg id="drivee" y="0">
    <!-- Вертикальный стержень -->
    <path fill="grey" stroke="black" stroke-width="3" d="M387.3 13.1h30v440.5h-30z"/>
    <!-- Цилиндр -->
    <path fill="black" d="M377.5 54.3c3.8-.7 50.6-.4 50.6-.4l9.3 10.5v88.8h-66.6V64.4Z"/>
    <!-- Линия фаски -->
    <path  stroke="white" d="m370.8 64 66.6.4"/>
    <!-- Верхний рычаг -->
    <path id="lever" fill="grey" stroke="black" stroke-width="3" d="M21.2 153c-3.1 0 1.1-6.2 2.6-9 1.4-2.4 3-5.7 5.9-6.3a17587 17587 0 0 1 341-65.7v81H21.3z"/>
  </svg>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" style="max-height: 100vh; max-width: 100vw;" viewBox="0 0 500 500" fill="none">
   <style>
      <![CDATA[
      & {
         --cx: 350px;       /* Координаты оси вращения */
         --cy: 250px;
         --cp0y: 200px;     /* высота нижней стороны верхней части системы */
         --dy0: 0px;        /* Начальная позиция (полезно для отсчета относительного смещения)  */
         --scene-time: 4s;  /* Время сцены  */
      }
      
/* Обычные переменные не могут участвовать в анимациях,  так как области 
их видимости ограничены местом определения значения + дочерние элементы.
А у анимаций нет никаких дочерних элемеентов. Поэтому значения, 
определенные в анимациях никогда не смогут быть получены снаружи.
       
Другое дело - property. Они имеют одно общее значение на всей странице и 
не подчиняются каскаду. */

      @property --rotation {   /* Угол вращения */
         syntax: '<angle>';    /* Определяем строгий тип - Угол */
         initial-value: 0deg;  /* Начальное значение */
         inherits: false;      /* Получать значение от родителей */
      }

      /* Значения угла вращения на каждый интервал таймлайна */

      @keyframes rotate {        
         0%  {  --rotation: 0deg;     }       
         16% {  --rotation: 13.5deg;  }        
         18% {  --rotation: 15deg;    }        
         20% {  --rotation: 13.5deg;  }        
         36% {  --rotation: 0deg;     }        
         48% {  --rotation: -13.5deg; }        
         50% {  --rotation: -15deg;   }        
         52% {  --rotation: -13.5deg; }       
         64% {  --rotation: 0deg;     }        
         80% {  --rotation: 13.5deg;  }        
         82% {  --rotation: 15deg;    }        
         84% {  --rotation: 13.5deg;  }        
         100% { --rotation: 0deg;    }
      }
      ]]>
   </style>
   <!-- <image href="image.gif" width="500" height="500" x="1" y="1" preserveAspectRatio="xMidYMid meet" crossorigin="anonymous" /> -->
   <g style="transform: scale(1.1) translate(-28px, -56px);">
      <path style="stroke: #f00; transform-origin: 350px 250px; 
                transform: rotate(var(--rotation)); 
                animation: rotate var(--scene-time) linear infinite;"
         d="m 350 200 c -125 -3 -240 15 -305 33 c 2.5 8.5 9.5 13.5 20 15 
            c 10 1 200 9 220 13 c 9 2 17 8 23 14 a 50 50 0 0 1 42 -75z
            a 50 50 0 1 1 -42 +75 m18 -25 a 25 25 0 1 1 50 0 25 25 0 1 1 -50 0" />
      <g stroke="#1D1D5D"
         style="transform: translateY(min(
               calc(var(--cy) - var(--cp0y) - cos(var(--rotation) - 86.8deg) * 305.5px), 
               calc(var(--cy) - var(--cp0y) - cos(var(--rotation) - 84.1deg) * 264.4px), 
               calc(var(--cy) - var(--cp0y) - cos(var(--rotation) - 82.5deg) * 242.1px), 
               calc(var(--cy) - var(--cp0y) - cos(var(--rotation) - 77.8deg) * 189.3px), 
               calc(var(--cy) - var(--cp0y) - cos(var(--rotation) - 69.2deg) * 132.6px), 
               var(--dy0)
             )); 
             animation: rotate var(--scene-time) linear infinite;">
         <path d="m 410 200 v 310 h 30 v -310 m 0 -81 v -30 h -30 v 30" />
         <path d="
   m 450 125 v 75 h -405 c 0 0 -1 -12 15 -14 
   c 113 -18 225 -38 340 -58 v -3 h 50 l -6 -6 h -38 l -6 6 v 75" />
      </g>
   </g>
</svg>

const kulak = document.getElementById('kulak');
const piston = document.getElementById('piston');

const init_h = findHighestPoint(kulak, 0).y;

const start_time = performance.now();
const anim_queue = [{
  start: 0,
  angle: 0
}, {
  start: 1600,
  angle: -40
}, {
  start: 3200,
  angle: 0
}, {
  start: 4200,
  angle: -20
}, {
  start: 5200,
  angle: 0
}];
const anim_total = anim_queue[anim_queue.length - 1].start;

function animate() {
  const time_passed = (performance.now() - start_time) % anim_total;
  const next_i = anim_queue.findIndex(el => el.start > time_passed);
  const angle = ((time_passed - anim_queue[next_i - 1].start) / (anim_queue[next_i].start - anim_queue[next_i - 1].start)) * (anim_queue[next_i].angle - anim_queue[next_i - 1].angle) + anim_queue[next_i - 1].angle;
  rotate(angle);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

function rotate(angle) {
  kulak.setAttribute('transform', `rotate(${angle})`);
  piston.setAttribute('transform', `translate(0, ${findHighestPoint(kulak, angle).y - init_h})`);
}


function findHighestPoint(element, angle) {
  const len = element.getTotalLength();
  const precision = 1 / 20;

  let h_point = rotatePoint(element.getPointAtLength(0), angle);
  let step = len * precision;
  let len_i = 0;
  let cur_point;

  for (let i = step; i <= len; i += step) {
    cur_point = rotatePoint(element.getPointAtLength(i), angle);
    if (cur_point.y < h_point.y) {
      h_point = cur_point;
      len_i = i;
    }
  }

  for (let j = len_i - step; j <= len_i + step; j += step * precision) {
    cur_point = rotatePoint(element.getPointAtLength(j), angle);
    if (cur_point.y < h_point.y) {
      h_point = cur_point;
    }
  }

  return h_point;
}

function rotatePoint(point, rotate_angle) {
  const angle = Math.atan2(point.y, point.x) + rotate_angle * (Math.PI / 180);
  const r = Math.hypot(point.x, point.y);

  point.x = r * Math.cos(angle);
  point.y = r * Math.sin(angle);

  return point;
}

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="500px" height="500px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality;"
viewBox="-350 -250 500 500"
 xmlns:xlink="http://www.w3.org/1999/xlink">
        <path id="kulak" transform="rotate(0)" fill="dimgrey" stroke="darkslategrey" d="M22.5 -44.05c-0.01,-0.03 -0.04,-0.05 -0.08,-0.08 -69.79,-38.5 -282.86,-50.37 -314.5,-45.84 -2.4,0.43 0.91,12.73 6.93,17.26 27.48,20.66 219.84,38.32 236.96,88.22 6.27,20.61 25.43,35.61 48.09,35.61 27.76,0 50.27,-22.5 50.27,-50.26 0,-19.63 -11.26,-36.63 -27.67,-44.91z"/>
        <path id="center" fill="grey" stroke="darkslategrey" d="M-0.06 -24.58c14.04,0 25.42,11.38 25.42,25.42 0,14.04 -11.38,25.42 -25.42,25.42 -14.04,0 -25.42,-11.38 -25.42,-25.42 0,-14.04 11.38,-25.42 25.42,-25.42zm0 -24.84c27.76,0 50.26,22.5 50.26,50.26 0,27.76 -22.5,50.27 -50.26,50.27 -27.76,0 -50.27,-22.51 -50.27,-50.27 0,-27.76 22.51,-50.26 50.27,-50.26z"/>
        <rect id="bar" fill="grey" stroke="darkslategrey" x="40.87" y="-224.64" width="29.85" height="419.83"/>
        <path id="piston" transform="translate(0,0)" stroke="darkslategrey" fill="grey" d="M23.3 -90.96l64.99 0 0 -84.25 -64.99 0 0 84.25zm0 -84.25l64.99 0 -8.72 -10.11 -47.55 0 -8.72 10.11zm0 84.25c-111.58,0 -223.15,0 -334.73,0 -0.9,-0.22 -0.18,-11.93 9.21,-14.74l325.52 -62.29 0 77.03z"/>
    </svg>

class KulakSVG extends HTMLElement {

  constructor() {
    super();

    const template = document.createElement('template');
    template.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="250px" height="250px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality;"
viewBox="-400 -425 750 750"
xmlns:xlink="http://www.w3.org/1999/xlink">       
        <path id="kulak" transform="rotate(0)" fill="dimgrey" stroke="darkslategrey" d="M22.5 -44.05c-0.01,-0.03 -0.04,-0.05 -0.08,-0.08 -69.79,-38.5 -282.86,-50.37 -314.5,-45.84 -2.4,0.43 0.91,12.73 6.93,17.26 27.48,20.66 219.84,38.32 236.96,88.22 6.27,20.61 25.43,35.61 48.09,35.61 27.76,0 50.27,-22.5 50.27,-50.26 0,-19.63 -11.26,-36.63 -27.67,-44.91z"/>
        <path id="center" fill="grey" stroke="darkslategrey" d="M-0.06 -24.58c14.04,0 25.42,11.38 25.42,25.42 0,14.04 -11.38,25.42 -25.42,25.42 -14.04,0 -25.42,-11.38 -25.42,-25.42 0,-14.04 11.38,-25.42 25.42,-25.42zm0 -24.84c27.76,0 50.26,22.5 50.26,50.26 0,27.76 -22.5,50.27 -50.26,50.27 -27.76,0 -50.27,-22.51 -50.27,-50.27 0,-27.76 22.51,-50.26 50.27,-50.26z"/>
        <rect id="bar" fill="grey" stroke="darkslategrey" x="40.87" y="-425" width="29.85" height="750"/>
        <path id="piston" transform="translate(0,0)" stroke="darkslategrey" fill="grey" d="M23.3 -90.96l64.99 0 0 -84.25 -64.99 0 0 84.25zm0 -84.25l64.99 0 -8.72 -10.11 -47.55 0 -8.72 10.11zm0 84.25c-111.58,0 -223.15,0 -334.73,0 -0.9,-0.22 -0.18,-11.93 9.21,-14.74l325.52 -62.29 0 77.03z"/>
    </svg>
`;

    this.root = this.attachShadow({
      mode: 'closed'
    });
    this.root.append(template.content.cloneNode(true));
  }

  connectedCallback() {
    const kulak = this.root.querySelector('#kulak');
    const piston = this.root.querySelector('#piston');
    const svg = this.root.querySelector('svg');

    const attribute_vb = this.getAttribute('viewBox');
    if(attribute_vb){svg.setAttribute('viewBox', attribute_vb);}

    const attribute_width = this.getAttribute('width');
    if(attribute_width){svg.setAttribute('width', attribute_width);}

    const attribute_height = this.getAttribute('height');
    if(attribute_height){svg.setAttribute('height', attribute_height);}

    const init_h = findHighestPoint(kulak, 0).y;

    const start_time = performance.now();
    const anim_queue = this.getAttribute('data-anim').split('|').map(str => {
      const data = str.split(',');
      return {
        start: +data[0],
        dur: +data[1],
        from: +data[2],
        to: +data[3]
      };
    });


    const anim_total = anim_queue.reduce((sum, cur) => sum + cur.dur, 0);

    function animate() {
      const time_passed = (performance.now() - start_time) % anim_total;
      const cur_anim = anim_queue.findLast(el => el.start < time_passed);
      const angle = ((time_passed - cur_anim.start) / cur_anim.dur) * (cur_anim.to - cur_anim.from) + cur_anim.from;
      rotate(angle);
      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);


    function rotate(angle) {
      kulak.setAttribute('transform', `rotate(${angle})`);
      piston.setAttribute('transform', `translate(0, ${findHighestPoint(kulak, angle).y - init_h})`);
    }


    function findHighestPoint(element, angle) {
      const len = element.getTotalLength();
      const precision = 1 / 20;

      let h_point = rotatePoint(element.getPointAtLength(0), angle);
      let step = len * precision;
      let len_i = 0;
      let cur_point;

      for (let i = step; i <= len; i += step) {
        cur_point = rotatePoint(element.getPointAtLength(i), angle);
        if (cur_point.y < h_point.y) {
          h_point = cur_point;
          len_i = i;
        }
      }

      for (let j = len_i - step; j <= len_i + step; j += step * precision) {
        cur_point = rotatePoint(element.getPointAtLength(j), angle);
        if (cur_point.y < h_point.y) {
          h_point = cur_point;
        }
      }

      return h_point;
    }

    function rotatePoint(point, rotate_angle) {
      const angle = Math.atan2(point.y, point.x) + rotate_angle * (Math.PI / 180);
      const r = Math.hypot(point.x, point.y);

      point.x = r * Math.cos(angle);
      point.y = r * Math.sin(angle);

      return point;
    }
  }

  disconnectedCallback() {

  }

}

customElements.define('kulak-svg', KulakSVG);

<!-- data-anim format: start,dur,angle_from,angle_to| start,dur,angle_from,angle_to... -->

<kulak-svg viewBox="-350 -250 500 500" data-anim="0,1600,0,-40|1600,1600,-40,0|3200,1000,0,-20|4200,1000,-20,0" ></kulak-svg>
<kulak-svg data-anim="0,1000,0,15|1000,2000,15,-15|3000,1000,-15,0"></kulak-svg>
<kulak-svg data-anim="0,15000,0,-360" height="300px" width="300px"></kulak-svg>
<kulak-svg data-anim="0,15000,0,360"></kulak-svg>