<video autoplay loop muted>
  <source src="https://d3macfshcnzosd.cloudfront.net/010918145_main_xxl.mp4">
</video>
<svg id="pieces" class="section1">
  <defs>
    <linearGradient id="fill1">
      <stop class="stop1" offset="0%"></stop>
      <stop class="stop2" offset="100%"></stop>
    </linearGradient>
    <linearGradient id="fill2">
      <stop class="stop1" offset="0%"></stop>
      <stop class="stop2" offset="100%"></stop>
    </linearGradient>
  </defs>
  <polygon id="path1" points="0,0 174,0 609,578 0,578 " fill="url(#fill1)"></polygon>
  <polygon id="path2" points="0,0 0,0 870,578 0,578 " fill="url(#fill2)"></polygon>
</svg>

<button class="btn">change</button>


<svg width="93" height="18" viewBox="0 0 93 18"  class="logo">
      <path fill="#fff" d="M82.664 6.228h2.9c3.535 0 6.718 1.102 6.694 5.337 0 4.025-3.583 5.43-6.6 5.43-3.82 0-6.732-1.38-6.744-5.267v-.538h3.63v.538h.002c0 1.477 1.696 2.038 3.063 2.038.896 0 3.017-.327 3.017-2.2.023-1.826-1.956-2.2-3.064-2.2h-6.32V.426h12.094v3.276h-8.673v2.526zm-16.02 10.555h-6.768V.403h6.767c5.68 0 8.203 3.788 8.203 8.073 0 4.283-2.428 8.307-8.203 8.307zm0-13.08h-3.138v9.712h3.137c3.583 0 4.574-2.623 4.574-4.985 0-2.364-1.132-4.728-4.574-4.728zm-23.28 4.382v8.698H39.69V.18l.516-.09 9.99 8.956V.403h3.677V17.06l-.383.066-10.125-9.04zm-17.036 9.1c-5.28 0-8.913-3.257-8.913-8.592 0-5.337 3.632-8.59 8.913-8.59 5.28 0 8.912 3.253 8.912 8.59 0 5.335-3.63 8.59-8.912 8.59zm0-13.906c-3.137 0-5.307 2.34-5.307 5.313 0 3.066 2.17 5.29 5.308 5.29 3.206 0 5.305-2.248 5.305-5.29 0-2.997-2.1-5.314-5.305-5.314zM7.77 12.15H5.515V8.805H7.77c1.77 0 2.64-1.148 2.64-2.458 0-1.31-.895-2.482-2.64-2.482h-4.1v12.918H-.01V.403h7.78c4.22 0 6.315 2.713 6.315 5.874 0 3.275-2.122 5.827-6.316 5.873z"></path>
</svg>
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

svg {
  position: absolute;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: multiply;
}

#path1, #path2 {
  mix-blend-mode: multiply;
}

#path2 {
    opacity: .7;
}

// gradients
linearGradient {
  stop {
      transition: all .4s ease-in-out;
  }
}

.section1 {
  
  #fill1 {
    
    .stop1 {
      stop-color: #f23b3e;
    }
    
    .stop2 {
        stop-color: #6d3a83;
    }
  }
  
  #fill2 {
    .stop1 {
      stop-color: #ee3a9e;
    }
    
    .stop2 {
        stop-color: #2f7ebf;
    }
  }
}

.section2 {
  #fill1 {
    .stop1 {
      stop-color: #713a80;
    }
    
    .stop2 {
        stop-color: #cc3b58;
    }
  }
  
  #fill2 {
    .stop1 {
      stop-color: #b13496;
    }
    
    .stop2 {
        stop-color: #4a4587;
    }
  }
}

.section3 {
  #fill1 {
    .stop1 {
      stop-color: #f33b47;
    }
    
    .stop2 {
        stop-color: #bb3b60;
    }
  }
  
  #fill2 {
    .stop1 {
      stop-color: #2c94c6;
    }
    
    .stop2 {
        stop-color: #39449c;
    }
  }
}

/* Button */
button {
  &.btn {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 16px 47px -15px #80101a;
    background: none;
    transition: box-shadow .2s ease-in-out;
    overflow: hidden;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3;
    outline: none;

    span {
      position: relative;
      z-index: 2;
    }
    
    &:before,
    &:after {
      content: '';
      z-index: -1;
      background: #e23b48 ;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
    }
    
    &:after {
      background: #23467a;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .2s ease-in-out;
      transition-delay: .1s;
    }
    
    &:hover {
      box-shadow: 0px 16px 47px -15px #08162b;
      
      &:after {
        transform: scaleY(1);
        transform-origin: bottom;
        transition-delay: 0s;
      }
    }
    
  }
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  width: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  fill: #fff;
  mix-blend-mode: normal;
  opacity: .9;
  filter: drop-shadow( 0 3px 7px rgba(64, 34, 100, .4) );
}
View Compiled
var w = $(window).width(),
    h = $(window).height(),
    totalSection = 3,
    actualSection = 1,
    path1,
    path2,
    section1,
    section2,
    section3;

function sections(){
  w = $(window).width();
  h = $(window).height();
  
  section1 = {
    path1: [
      { x: 0, y: 0 },
      { x: w * 0.2, y: 0 },
      { x: w * 0.7, y: h },
      { x: 0, y: h }
    ],
    path2: [
      { x: -w * 0.2, y: h * 0.2 },
      { x: 0, y: 0 },
      { x: w, y: h },
      { x: 0, y: h }
    ]
  }

   section2 = {
    path1: [
      { x: w * 0.15, y: 0 },
      { x: w, y: 0 },
      { x: w, y: h },
      { x: w * 0.65, y: h }
    ],
    path2: [
      { x: w, y: h * 0.3 },
      { x: w * 2, y: h * 0.3 },
      { x: w, y: h },
      { x: w * 0.45, y: h }
    ]
  }

  section3 = {
    path1: [
      { x: w * 0.1, y: 0 },
      { x: w, y: 0 },
      { x: w * 1.1, y: h * 0.7 },
      { x: w, y: h * 0.95 }
    ],
    path2: [
      { x: w * 0.18, y: 0 },
      { x: w, y: 0 },
      { x: w * 0.95, y: h },
      { x: w * 0.55, y: h }
    ]
  }
}



// Cambio section al click
$('button').click(function(){
  actualSection = (actualSection >= totalSection) ? 1 : ++actualSection;
  $('#pieces').removeAttr('class').addClass('section' + actualSection);
  morphingPaths(actualSection);
});

// window resize
$(window).on('resize', function(){
  morphingPaths(actualSection);
}).resize();

// Morphing Paths
function morphingPaths(section) {
  sections();
  var $path1 = $('#path1'),
      $path2 = $('#path2');
  
  switchToPath($path1, section, 'path1');
  setTimeout(function(){
    switchToPath($path2, section, 'path2');
  }, 200);
}

function switchToPath($path, section, sectionPath) {
  var pathPoints = eval('section' + section)[sectionPath];
  var points = '';
  
  window[sectionPath] = []; // reset var path1/path2
  actualPoints = $path.attr('points').split(' ');  // punti corretti dell'svg
  
  
  // creo un oggetto path1 / path2 che abbia i punti iniziali e finali
  for (var i = 0; i < pathPoints.length; i++) {
    actualPoint = actualPoints[i].split(',');
    
    obj = {
      x: actualPoint[0],
      endX: pathPoints[i].x,
      y: actualPoint[1],
      endY: pathPoints[i].y
    }
    
    // path1 / path2
    window[sectionPath].push(obj);
  }
  
  // animo con GSAP
  for (var i = 0; i < window[sectionPath].length; i++) {
    p = window[sectionPath][i];
    
    console.log(p.x);
    
    TweenMax.to(p, 1, {
      x: p.endX,
      y: p.endY,
      ease: Expo.easeInOut,
      delay: i * .25,
      onUpdate: function(){
        animatePath($path, window[sectionPath]);
      }
     }, .2);
  }
  
  function animatePath($path, path) {
    var points = '';
    for (var i = 0; i < path.length; i++) {
      var point = path[i].x + ',' + path[i].y;
      points += point + ' ';
    }
    $path.attr('points', points);
  }
}
Rerun