HTML/CSS - Graphemic Online Editor and JavaScript Compiler

html

<!-- Created by SoraKatadzuma -->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <!-- The below script is courtesy of https://rawgit.com/Grapheme/graphemescope/master/lib/graphemescope.js -->
        <script type="text/javascript">(function(){var a,b;b=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){return window.setTimeout(a,1e3/30)}}(),window.Graphemescope=a=function(){function a(a){var c=this;this.parentElement=null!=a?a:window.document.body,this.enabled=!0,this.radiusFactor=1,this.zoomFactor=1,this.angleFactor=0,this.zoomTarget=1.2,this.angleTarget=.8,this.easeEnabled=!0,this.ease=.1,null==this.domElement&&(this.domElement=document.createElement("canvas")),null==this.ctx&&(this.ctx=this.domElement.getContext("2d")),this.alphaFactor=1,this.alphaTarget=1,this.parentElement.appendChild(this.domElement),this.oldResizeHandler=function(){},null!==window.onresize&&(this.oldResizeHandler=window.onresize),window.onresize=function(){return c.resizeHandler()},this.resizeHandler(),b(function(){return c.animationFrame()})}return a.prototype.animationFrame=function(){var a=this;return b(function(){return a.animationFrame()}),this.enabled?(this.update(),this.draw()):void 0},a.prototype.resizeHandler=function(){return this.width=this.domElement.width=this.parentElement.offsetWidth,this.height=this.domElement.height=this.parentElement.offsetHeight,this.radius=.5*this.radiusFactor*Math.min(this.width,this.height),this.radiusHeight=.5*Math.sqrt(3)*this.radius,this.oldResizeHandler()},a.prototype.update=function(){return this.easeEnabled?(this.angleFactor+=(this.angleTarget-this.angleFactor)*this.ease,this.zoomFactor+=(this.zoomTarget-this.zoomFactor)*this.ease,this.alphaFactor+=(this.alphaTarget-this.alphaFactor)*this.ease):(this.angleFactor=this.angleTarget,this.zoomFactor=this.zoomTarget,this.alphaFactor=this.alphaTarget)},a.prototype.drawImage=function(a){var b,c;return this.ctx.save(),b=2/3*this.radiusHeight,c=this.zoomFactor*b/(.5*Math.min(a.width,a.height)),this.ctx.translate(0,b),this.ctx.scale(c,c),this.ctx.rotate(2*this.angleFactor*Math.PI),this.ctx.translate(-.5*a.width,-.5*a.height),this.ctx.fill(),this.ctx.restore()},a.prototype.drawCell=function(a){var b,c,d;for(d=[],b=c=0;6>c;b=++c)this.ctx.save(),this.ctx.rotate(2*b*Math.PI/6),this.ctx.scale([-1,1][b%2],1),this.ctx.beginPath(),this.ctx.moveTo(0,0),this.ctx.lineTo(-.5*this.radius,1*this.radiusHeight),this.ctx.lineTo(.5*this.radius,1*this.radiusHeight),this.ctx.closePath(),this.drawImage(a),d.push(this.ctx.restore());return d},a.prototype.drawLayer=function(a){var b,c,d,e,f,g,h,i,j,k,l,m;for(this.ctx.save(),this.ctx.translate(.5*this.width,.5*this.height),f=Math.ceil(.5*this.height/this.radiusHeight),c=Math.ceil(.5*this.width/(3*this.radius)),d=function(){l=[];for(var a=-c;c>=-c?c>=a:a>=c;c>=-c?a++:a--)l.push(a);return l}.apply(this),g=function(){m=[];for(var a=-f;f>=-f?f>=a:a>=f;f>=-f?a++:a--)m.push(a);return m}.apply(this),h=0,j=g.length;j>h;h++){for(e=g[h],this.ctx.save(),this.ctx.translate(0,this.radiusHeight*e),Math.abs(e)%2&&this.ctx.translate(1.5*this.radius,0),i=0,k=d.length;k>i;i++)b=d[i],this.ctx.save(),this.ctx.translate(3*b*this.radius,0),this.drawCell(a),this.ctx.restore();this.ctx.restore()}return this.ctx.restore()},a.prototype.draw=function(){return null!=this.imageProxy&&(this.ctx.fillStyle=this.patternProxy,this.ctx.globalAlpha=1-this.alphaFactor,this.drawLayer(this.imageProxy)),null!=this.image?(this.ctx.fillStyle=this.pattern,this.ctx.globalAlpha=this.alphaFactor,this.drawLayer(this.image)):void 0},a.prototype.setImageDirect=function(a){return null!=this.image&&(this.imageProxy=this.image,this.patternProxy=this.pattern),this.image=a,this.pattern=this.ctx.createPattern(this.image,"repeat"),this.alphaFactor=0},a.prototype.setImage=function(a){var b,c=this;return"string"==typeof a?(b=new Image,b.src=a,b.onload=function(){return c.setImageDirect(b)}):this.setImageDirect(a)},a}()}).call(this); 
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="container"></div>
    </body>
    
    <script type="text/javascript">
var images = [
            "https://i.ytimg.com/vi/lt0WQ8JzLz4/maxresdefault.jpg",
            "http://bestwallpaperhd.com/wp-content/uploads/2013/01/nebula-wallpaper-widescreen.jpg",
            "https://s-media-cache-ak0.pinimg.com/originals/3e/a3/03/3ea3035261cda442f086ee1f3b55dd46.jpg",
            "https://s-media-cache-ak0.pinimg.com/originals/d8/78/ac/d878ac9bd86d4da1b9f75b8fc27d837a.jpg",
            "http://www.desdelaplaza.com/wp-content/uploads/2017/02/via-lactea.jpg",
            "http://wallpaper-gallery.net/images/wallpaper-artwork/wallpaper-artwork-13.jpg",
            "http://thewardrobedoor.com/wp-content/uploads/2015/11/the_bubble_nebula_nasa_space_abstract_stars_1280x768_hd-wallpaper-1401667.jpg",
            "https://cdn.spacetelescope.org/archives/images/large/heic1007a.jpg",
            "https://s-media-cache-ak0.pinimg.com/originals/d6/0e/0b/d60e0b8cddad9cd53563de171e2e4af9--iphone-backgrounds-the-galaxy.jpg",

css

/* Created by SoraKatadzuma */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body {
  /* Makes kaleidoscope fullscreen */
  margin: 0; padding: 0;
  overflow : hidden;
  background-color : black;
}
.overlay {
  background-color: black;
  opacity : 0.9;
  padding : 5px;
  position:absolute;
  top: 5px; left: 0px;
  z-index: 2;
  font-family: "Roboto Condensed";
  font-size: 1.5em;
  color: white;
  text-decoration: none;
}

BROWSER

Console