<h1>SVG is so flexible</h1>
<svg viewBox="-150 -150 300 300" width="600" height="600" version="1.1">
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1">
            <animate attributeType="XML"
                     attributeName="stop-color"
                     values="blue;green;yellow;red;blue"
                     dur="3s"
                     repeatCount="indefinite"></animate>
        </stop>
        <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1">
            <animate attributeType="XML"
                     attributeName="stop-color"
                     values="green;yellow;red;blue;green"
                     dur="3s"
                     repeatCount="indefinite"></animate>
        </stop>
        <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1">
            <animate attributeType="XML"
                     attributeName="stop-color"
                     values="yellow;red;blue;green;yellow"
                     dur="3s"
                     repeatCount="indefinite"></animate>
        </stop>
    </linearGradient>
    <g>
        <path id="line-path" d="" stroke="url(#grad1)" stroke-width="1em" stroke-linecap="round" fill="transparent" />
    </g>
</svg>
body {
  background: #000;
  color: white;
  text-align: center;
  font: 1em sans-serif;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

svg {
  position: absolute;
  display: block;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#line-path {
  cursor: pointer;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}
View Compiled
    var bend = 0;
    var path = document.getElementById("line-path");

    var x = 0;
    var swing = 32;
    var friction = .98;

    function step() {
      x++;

      swing *= friction;

      bend = (10 * Math.cos(x / 5) * swing);
      //var px = (10 * Math.cos(x/27) * swing);
      //var py = (10 * Math.cos(x/31) * swing);
      var px = 0,
        py = 0;

      if (bend.toFixed(3) == 0) bend = 0.01; // problems with zero  O.o (?)
      var pathData = "M -150 " + px + "C -150 0 ,0 " + bend.toFixed(3) + ", 150 " + py;

      path.setAttribute("d", pathData);

      window.requestAnimationFrame(step);
    }

    path.onclick = function(e) {
      var offset = e.clientX / window.innerWidth - 0.5;
      swing += 16;
    }

    window.requestAnimationFrame(step);
Rerun