How to make such a moving line using Canvas?

Question

css

Hello. How to make such a moving line using Canvas?
Link
How to connect when hovering over the button?

Answer 1

the code is open. lazy to see?

__modules['oscillation'] = function(module){
  //getViewport().width РР· Р·Р° небольших отступов РїРѕ бокам
  var SW = new SiriWave({
      container: module.get(0),
      width: getViewport().width+10,
      height: 140,
      color: 'ed1c24',
      frequency: 2,
      speed: 0.07,
      amplitude: .01,
      autostart: true
  });

  // dirty resize
  $(window).resize(_.throttle(function(){
    SW.width = (getViewport().width+10)*SW.ratio;
    SW.canvas.width = (getViewport().width+10)*SW.ratio;
    SW.canvas.style.width = (getViewport().width+10)*SW.ratio + 'px';
    SW.width_2 = SW.width / 2;
    SW.width_4 = SW.width / 4;
    SW._clear();
  },80));

  function impulse(impulse, factor) {
    factor  = factor || 1;
    impulse = impulse || 3;
    TweenMax.to(SW, .15, { amplitude: .1*impulse*1.2, frequency:2+(impulse/2), ease:Power2.easeOut, onComplete:function(){
        TweenMax.to(SW, (.15+(impulse/80))/factor, { amplitude:.0001, frequency:2, ease:Power2.easeIn });
      }
    })
  }

  function set(impulse) {
    impulse = impulse || 3;
    TweenMax.to(SW, .3, { amplitude: .1*impulse, frequency:2+(impulse/3), ease:Power2.easeOut })

  }

  function impulseFrequency(impulse) {
    impulse = impulse || 3;
    TweenMax.to(SW, .3, { frequency:2+(impulse/3), ease:Power2.easeOut, onComplete:function(){
        TweenMax.to(SW, .2+(impulse/50), { frequency:2, ease:Power2.easeIn });
      }
    })
  }

  function setFrequency(impulse) {
    impulse = impulse || 3;
    TweenMax.to(SW, .3, { frequency:2+(impulse/3), ease:Power2.easeOut });
  }

  function setAmplitude(impulse) {
    TweenMax.to(SW, .3, { amplitude:impulse, ease:Power2.easeOut });
  }

  function impulseSpeed(impulse) {
    impulse = impulse || 3;
    TweenMax.to(SW, .3, { speed:0.1+(impulse/30), ease:Power2.easeOut, onComplete:function(){
        TweenMax.to(SW, .2+(impulse/50), { speed:0.1, ease:Power2.easeIn });
      }
    })
  }

  function setSpeed(impulse) {
    impulse = impulse || 3;
    TweenMax.to(SW, .3, { frequency:0.1+(impulse/30), ease:Power2.easeOut });
  }

  function stop(impulse, factor){
    factor  = factor || 1;
    impulse = impulse || 3;
    TweenMax.to(SW, 0, { amplitude: .1*impulse*1.2, frequency:2+(impulse/2), ease:Power2.easeOut, onComplete:function(){
        TweenMax.to(SW, 0, { amplitude:.0001, frequency:2, ease:Power2.easeIn });
      }
    })
  }

  window.line = {
    setAmplitude : setSpeed,
    set : set,
    impulse : impulse,
    setFrequency : setFrequency,
    impulseFrequency : impulseFrequency,
    setSpeed : setSpeed,
    impulseSpeed : impulseSpeed,
    stop : stop
  }

  $('body').on('mouseenter','.button',function(){ set(2