JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="masked">

</div>

CSS

.masked{
  clip-path: polygon(26% 35%, 32% 17%, 36% 1%, 49% 13%, 63% 31%, 66% 53%, 69% 71%, 79% 86%, 85% 100%, 6% 100%, 2% 82%, 10% 60%);
  width:100px;
  height:100px;
  background-color:purple;
}

JavaScript

var element = document.querySelector('.masked');

var positions = Array(26,35,32,17,36,1,49,13,63,31,66,53,69,71,79,86,85,100,6,100,2,82,10,60);

var l = positions.length;
var direction = 1;
var step = 0;

function updateMask(){

 for(var i=0;i<l;i+=2){
 
 	positions[i] += (positions[i+1]/2)*direction;
  
  positions[i] = parseInt(positions[i]);
 
 }
 
 step++;
 
 if(step == 10){
 
 direction = direction*-1;
 
 step = 0;
 
 }
  
  element.clipPath = 'polygon(' + positions[0] + '% ' + positions[1] + '%, ' + positions[2] + '% ' + positions[3] + '%, ' + positions[4] + '% ' + positions[5] + '%, ' + positions[6] + '% ' + positions[7] + '%, ' + positions[8] + '% ' + positions[9] + '%, ' + positions[10] + '% ' + positions[11] + '%, ' + positions[12] + '% ' + positions[13] + '%, ' + positions[14] + '% ' + positions[15] + '%, ' + positions[16] + '% ' + positions[17] + '%, ' + positions[18] + '% ' + positions[19] + '%, ' + positions[20] + '% ' + positions[21] + '%, ' + positions[22] + '% ' + positions[23] + '%)';
  
  //console.log(element.clipPath);
  
  window.requestAnimationFrame(updateMask)

}

window.requestAnimationFrame(updateMask)