Moz The Monster snippet - https://codepen.io/TheDahv/pen/BmZRaj

mtm.js

/**
 * A silly little snippet to get #MozTheMonster out from under your bed and
 * hiding under the source code of your web page.
 *
 * For devs reading this to evaluate and/or learn JS, please don't follow this
 * style. It is not meant to be readable nor maintainable, and I would handily
 * reject this kind of code in my professional contexts. It takes a *bunch* of
 * hacks and shortcuts to keep code small (I was originally challenging myself
 * to fit it into a Tweet...not gonna happen).
 *
 * Copyright 2017 - David Pierce
 * - http://thedahv.com
 * - https://twitter.com/@TheDahv
 * - https://github.com/TheDahv
 */
(() => {
  const ANIMATION_SECONDS = 3000;
  (s = document.createElement('style')).innerHTML = [
    '.ctop{transform:translate(0, 400px);top:-400px;left:202px;opacity: 0;}',
    '.crt{transform:translate(-400px, 0);top:202px;right:-400px;opacity: 0;}',
    '.cbot{transform:translate(0, -400px);bottom:-400px;left:202px;opacity: 0;}',
    '.clt{transform:translate(400px, 0);top:202px;left:-400px;opacity: 0;}',
    '.itop{transform:rotate(180deg)}',
    '.irt{transform:rotate(270deg);}',
    '.ibot{transform:rotate(0deg);}',
    '.ilt{transform:rotate(90deg);}'
  ].join('');
  document.body.appendChild(s);

  [ ((el) => (el.src = 'https://goo.gl/mfiVvF') && el)
  , ((el) => (el.style.clipPath = 'ellipse(200px 200px at 200px 400px)') && el)
  ].reduce((el, op) => op(el), (img = document.createElement('img')));

  [ ((el) => (el.style.position = 'fixed') && el)
  , ((el) => (el.style.filter = 'drop-shadow(0 0 30px #000)') && el)
  , ((el) => (el.style.visibility = 'hidden') && el)
  ].reduce((el, op) => op(el), (ctr = document.createElement('span')));
  ctr.append(img);
  requestAnimationFrame(() => { document.body.append(ctr); });

  (addMoz = () => {
    let classes = [];
    let translations = [];
    switch (Math.floor(Math.random() * 10) % 4) {
      case 0: //top
        classes = ['ctop', 'itop'];
        translations = [[0, 400], [0, 400], [0, -400]];
        break;
      case 1: //right
        classes = ['crt', 'irt'];
        translations = [[-400, 0], [-400, 0], [400, 0]];
        break;
      case 2: //bottom
        classes = ['cbot', 'ibot'];
        translations = [[0, -400], [0, -400], [0, 400]];
        break;
      case 3: //left
        classes = ['clt', 'ilt'];
        translations = [[400, 0], [400, 0], [-400, 0]];
        break;
    }

    ctr.className = classes[0]; img.className = classes[1];
    ctr.animate([
      { transform: 'translate(0, 0)', opacity: 0 }
    , { transform: `translate(${translations[0][0]}px, ${translations[0][1]}px)`, opacity: 1, offset: .6 }
    , { transform: `translate(${translations[1][0]}px, ${translations[1][1]}px)`, opacity: 1, offset: .8 }
    , { transform: `translate(${translations[2][0]}px, ${translations[2][1]}px)`, opacity: 0 }
    ], { duration: ANIMATION_SECONDS, easing: 'ease-out' });
    ctr.style.visibility = 'visible';

    // Run animation again 1-30 seconds after animation completes.
    setTimeout(addMoz, ANIMATION_SECONDS + (Math.floor(Math.random() * 100) % 30) * 1000);
  })()
})();

mtm.min.js

// generated with https://www.npmjs.com/package/uglify-es
// cat mtm.js| uglifyjs -cm
(s=document.createElement("style")).innerHTML=[".ctop{transform:translate(0, 400px);top:-400px;left:202px;opacity: 0;}",".crt{transform:translate(-400px, 0);top:202px;right:-400px;opacity: 0;}",".cbot{transform:translate(0, -400px);bottom:-400px;left:202px;opacity: 0;}",".clt{transform:translate(400px, 0);top:202px;left:-400px;opacity: 0;}",".itop{transform:rotate(180deg)}",".irt{transform:rotate(270deg);}",".ibot{transform:rotate(0deg);}",".ilt{transform:rotate(90deg);}"].join(""),document.body.appendChild(s),[t=>(t.src="https://goo.gl/mfiVvF")&&t,t=>(t.style.clipPath="ellipse(200px 200px at 200px 400px)")&&t].reduce((t,e)=>e(t),img=document.createElement("img")),[t=>(t.style.position="fixed")&&t,t=>(t.style.filter="drop-shadow(0 0 30px #000)")&&t,t=>(t.style.visibility="hidden")&&t].reduce((t,e)=>e(t),ctr=document.createElement("span")),ctr.append(img),requestAnimationFrame(()=>{document.body.append(ctr)}),(addMoz=(()=>{let t=[],e=[];switch(Math.floor(10*Math.random())%4){case 0:t=["ctop","itop"],e=[[0,400],[0,400],[0,-400]];break;case 1:t=["crt","irt"],e=[[-400,0],[-400,0],[400,0]];break;case 2:t=["cbot","ibot"],e=[[0,-400],[0,-400],[0,400]];break;case 3:t=["clt","ilt"],e=[[400,0],[400,0],[-400,0]]}ctr.className=t[0],img.className=t[1],ctr.animate([{transform:"translate(0, 0)",opacity:0},{transform:`translate(${e[0][0]}px, ${e[0][1]}px)`,opacity:1,offset:.6},{transform:`translate(${e[1][0]}px, ${e[1][1]}px)`,opacity:1,offset:.8},{transform:`translate(${e[2][0]}px, ${e[2][1]}px)`,opacity:0}],{duration:3e3,easing:"ease-out"}),ctr.style.visibility="visible",setTimeout(addMoz,3e3+Math.floor(100*Math.random())%30*1e3)}))();