Better controls for animation

hugo/layouts/shortcodes/animation.html

-<svg viewbox="0 0 760 390" width="760" height="390" version="1.1" id="plot" class="img-fluid">
+<svg viewbox="0 0 760 390" width="760" height="390" version="1.1" id="plot" class="img-fluid w-100">
  <defs>
   <marker id="arrow" markerHeight="4" markerWidth="4" orient="auto-start-reverse" refX="5" refY="5" viewBox="0 0 10 10">
    <path d="m0 0 10 5-10 5z"/>
@@ -251,13 +251,13 @@
  </g>
  <path d="m550.63 133.01 74.11 28.432c10.89 32.789-6.2603 43.051-31.462 46.843l-54.301-54.767z" fill="#ffd750" opacity="0" filter="url(#filter1948)" id="light"/>
  <path d="m526.23 163.27-5.2487-21.988-69.356-42.625 10.48-17.052 69.356 42.625 21.988-5.2487 13.338 8.1972-27.22 44.289z" fill="url(#linearGradient1832)"/>
+ <foreignObject x="460" y="300" width="160" height="160">
+  <div xmlns="http://www.w3.org/1999/xhtml">
+   <button id="animationPlay" class="ml-2 btn btn-secondary animation-hide"><i class="fas fa-play"></i></button>
+  </div>
+ </foreignObject>
 </svg>
 
-<p id="animationControls" class="animation-hide">
-  <input type="range" id="animationSlider" min="0" max="5000" value="0" style="width:400px;margin-left:45px;vertical-align:-3px">
-  <button id="animationPlay" class="ml-2 btn btn-secondary"><i class="fas fa-play"></i></button>
-</p>
-
 <script>
   var clipRect = SVG.adopt(plot.getElementById('clipRect'));
   var light = SVG.adopt(plot.getElementById('light'));
@@ -269,17 +269,18 @@
   var lineLed2 = SVG.adopt(plot.getElementById('lineLed2'));
   var lineLed1 = SVG.adopt(plot.getElementById('lineLed1'));
 
+  var duration = 5000;
+  var moveTimeline = undefined;
+
   function animate() {
+    moveTimeline = undefined;
     var timeline = new SVG.Timeline();
     timeline.persist(true);
-    animationSlider.addEventListener("input", () => {
-      timeline.time(animationSlider.value);
-    });
 
     clipRect
       .width(0)
       .timeline(timeline)
-      .animate(5000, 0, 'absolute').ease('-').width(390);
+      .animate(duration, 0, 'absolute').ease('-').width(390);
 
     linePhoto.opacity(1);
     lineRef.opacity(1);
@@ -300,17 +301,30 @@
       .animate(1, 3600, 'absolute').fill('#80ff80');
 
     setTimeout(() => {
-        animationControls.classList.add('animation-show');
-        animationControls.classList.remove('animation-hide');
-        animationSlider.value = 5000;
-      }, 5000);
+      animationPlay.classList.add('animation-show');
+      animationPlay.classList.remove('animation-hide');
+      moveTimeline = timeline;
+    }, duration);
   }
 
+  var point = plot.createSVGPoint();
+  plot.addEventListener("mousemove", (event) => {
+    if (!moveTimeline) {
+      return;
+    }
+    point.x = event.clientX;
+    point.y = event.clientY;
+    var cursor = point.matrixTransform(plot.getScreenCTM().inverse());
+    var x1 = 54;
+    var x2 = 431;
+    moveTimeline.time((cursor.x - x1) / (x2 - x1) * duration);
+  });
+
   animate();
 
   animationPlay.addEventListener("click", () => {
-    animationControls.classList.add('animation-hide');
-    animationControls.classList.remove('animation-show');
+    animationPlay.classList.add('animation-hide');
+    animationPlay.classList.remove('animation-show');
     linePhoto.animate(200).opacity(0);
     lineRef.animate(200).opacity(0);
     lineLed1.animate(200).opacity(0);