JSFiddle - React, Tailwind, and code Playground

CSS

.valknut {
    -webkit-animation: rotate 2s infinite linear;
    -moz-animation: rotate 2s infinite linear;
    animation: rotate 2s infinite linear;
    -webkit-transform-origin: 50.37% 59.24%;
    -moz-transform-origin: 50.37% 59.24%;
    transform-origin: 50.37% 59.24%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg) translateZ(0);}
  to {  -webkit-transform:rotate(360deg) translateZ(0);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg) translateZ(0);}
  to {  -moz-transform:rotate(360deg) translateZ(0);}
}


@keyframes rotate {
  from {-moz-transform:rotate(0deg) translateZ(0);}
  to {  -moz-transform:rotate(360deg) translateZ(0);}
}

JavaScript

function loadImages(sources, callback) {
  var images = {};
  var loadedImages = 0;
  var numImages = 0;
  // get num of sources
  for(var src in sources) {
    numImages++;
  }
  for(var src in sources) {
    images[src] = new Image();
    images[src].onload = function() {
      if(++loadedImages >= numImages) {
        callback(images);
      }
    };
    images[src].src = sources[src];
  }
}

var images = {
    mask: 'http://www.motionlove.co.uk/banners/relishCreative/finalfantasy/_160x600/mask_1.png',
    valknut: 'http://www.motionlove.co.uk/banners/relishCreative/finalfantasy/_160x600/man.jpg'
};

loadImages(images, function (images) {
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');
    
    canvas.className = 'valknut';
    
    var maskRect = {x: 183, y: 183, w: 400, h: 346};
    
    canvas.width = maskRect.w;
    canvas.height = maskRect.h;
    
    context.save();
    context.drawImage(images.valknut, maskRect.x, maskRect.y, maskRect.w, maskRect.h, 0, 0, maskRect.w, maskRect.h);
    context.globalCompositeOperation = 'destination-in';
    context.drawImage(images.mask, maskRect.x, maskRect.y, maskRect.w, maskRect.h, 0, 0, maskRect.w, maskRect.h);
    context.restore();
    
    document.body.appendChild(canvas);
});