JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<img alt=""...

CSS

body{
  margin: 0;
  padding: 0;
  cursor: move;
}
img,canvas{
  position: absolute;
  background: #fff;
}

JavaScript

(function(Point, Mesh){/////////////////////////////////////////////////////////////////////////////
  
  var win      = this,
      doc      = win.document,
      cvs      = doc.querySelector("canvas"),
      ctx      = cvs.getContext("2d"),
      mousePos = [],
      WIDTH    = cvs.width,
      HEIGHT   = cvs.height,
      MAX_DIST = Math.sqrt(WIDTH*WIDTH + HEIGHT*HEIGHT) / 5 >> 0,//5
      isMouseDown = false,
      anchor, points, meshes, timer;
      
  var animate = function me(){
    var anc = anchor,
        aox = anc.ox,
        aoy = anc.oy,
        msp = mousePos,
        dx  = msp[0] - aox,
        dy  = msp[1] - aoy;
    
    if(dx || dy){
      var MAX  = MAX_DIST,
          c    = ctx,
          src  = Mesh.source,
          msh  = meshes,
          i    = msh.length,
          j    = i >> 3,
          pts  = points,
          k    = pts.length,
          dist = Point.distance,
          p, d;
      
      while(k--){
        p = pts[k];
        d = 1 - dist(p, anc) / MAX;
        p.x = p.ox + dx * d;
        p.y = p.oy + dy * d;
      }
      anc.x = msp[0];
      anc.y = msp[1];
      
      c.clearRect(0, 0, WIDTH, HEIGHT);
      while(j--){
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
        msh[--i].draw(c, src);
      }
      while(i--){
        msh[i].draw(c, src);
      }
    }
    mousePos = [];
    isMouseDown && ( timer = setTimeout(me, 32) );
  };
  var back = function(fnc){
    var W   = WIDTH,
        H   = HEIGHT,
        cnt = 5;
    cnt && function me(){
      var c   = ctx,
          src = Mesh.source,
          msh = meshes,
          i   = msh.length,
          j   = i >> 3,
          pts = points,
          k   = pts.length,
          p;
      while(k--){
        p = pts[k];
        p.x += (p.ox - p.x) / cnt;
        p.y += (p.oy - p.y) / cnt;
      }
     ...