Interactive SVG animation

This is an animated pump with SVG.js where the rotation speed can be adjusted by a slider.

by partofthething

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
  </head>

  <body>
    <div id="drawing"> </div>
    <div>
      <input type="range" id="pumpspeed"/>
    </div>
  </body>

</html>

JavaScript

// for SVG.js 3+ you need this syntax...
//var draw = SVG().addTo('#drawing').size(300, 300);
var draw = SVG('drawing').size(300, 200);
var casing = draw.group();
casing.svg('<g transform="translate(-52.685156,-60.067134)" id="layer1"> <path d="M 92.608817,60.199425 C 79.599239,60.026547 68.767665,73.460027 71.808956,86.147507 c 0.622159,1.600922 1.327845,3.028706 -0.548167,2.649648 -6.147779,0 -12.29556,0 -18.443342,0 0,4.899959 0,9.799918 0,14.699875 13.391126,5e-5 26.833026,-6e-5 40.192378,0 14.027105,0.53518 25.349485,-14.80929 20.657655,-28.042759 -0.27758,-1.132784 2.1572,-0.301421 3.09306,-0.555493 5.2239,0 10.44779,0 15.67168,0 0,-4.899784 0,-9.799568 0,-14.699353 -13.27446,0 -26.54893,0 -39.823403,0 z" id="casing"> </path></g>');

casing.center(100,100);

var rotor = draw.group();
//Lesson: negative moves mess up the center() calls
var rect1 = draw.rect(100, 10).move(0,45).attr({fill:'#f06'});
var rect2 = draw.rect(10, 100).move(45,0).attr({fill:'#f06'});
rotor.add(rect1);
rotor.add(rect2);
rotor.center(100,100).scale(0.4);

var pump = draw.group();
pump.add(casing);
pump.add(rotor);
pump.scale(2);
pump.fill('#f92');

var fx = rotor.animate({ease:'-'}).rotate(360).loop();

function changePump(e) {
  //input is 0-100. Change to animation durations in ms. 
  fx.situation.duration = 10300 - e.target.value * 100
}

var pumpspeed = document.getElementById('pumpspeed');
//pumpspeed.oninput = changePump;
pumpspeed.onchange= changePump;