Untitled

dabblet.css

html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background: black;
			overflow: hidden;
			cursor: pointer;
			font-family: Helvetica, arial, sans-serif;
		}
		.form{
			position: fixed;top: 20px;left:10px;
			color: white;
		}
		a{color:white;text-decoration: none;}
		a:hover{text-decoration: underline;}

dabblet.html

<canvas id="canvas"></canvas>
	<div class="form">
		<div>
			Speed : <input id="speed" type="range" min="0" max="100" value="50">
		</div>
		<a href="" id="download" download="fileName">Download</a>
	</div>

dabblet.js

window.requestAnimFrame = (function(){
			return  window.requestAnimationFrame 	||
			window.webkitRequestAnimationFrame 		||
			window.mozRequestAnimationFrame    		||
			function( callback ){
				window.setTimeout(callback, 1000 / 60);
			};
		})();

		var canvas 	  = document.getElementById('canvas'),
			ctx       = canvas.getContext('2d'),
			ww        = window.innerWidth,
			wh        = window.innerHeight,
			x         = ww/2,
			height    = wh * (Math.sqrt(3)/2),
			y         = (wh-height)/2,
			triangles = 30,
			colors	  = [],
			start 	  = true,
			speed	  = 50;
		
		canvas.width  = ww;
		canvas.height = wh;

		ctx.strokeStyle = "black";
		ctx.lineWidth   = 1;

		//Set the shading colors
		for (var i=0;i<=triangles;i++){
			colors[i] = "rgba("+(60+(i*3))+","+(20+(i*3))+","+(80+(i*3))+",1)";
		}

		var j = 0, k = 0;
		function draw(){

			ctx.clearRect(0,0,ww,wh);
			for (var i=0;i<=triangles;i++){
				
				//BLACK & WHITE
					// ctx.fillStyle = "white";
					// if(i%2==0){ctx.fillStyle="black";}

				//RANDOM COLOR
					ctx.fillStyle = colors[i];

				ctx.save();
				ctx.translate( ww/2, wh/2 );
				ctx.rotate(i*j/(-speed*6));
				ctx.translate( -ww/2,-wh/2 );

				ctx.beginPath();
				ctx.moveTo(x, y+(i*height/triangles/2));
				ctx.lineTo(x+wh/2-(i*wh/triangles/2), y+height-(i*height/triangles/2));
				ctx.lineTo(x-wh/2+(i*wh/triangles/2), y+height-(i*height/triangles/2));
				ctx.lineTo(x, y+(i*height/triangles/2));
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
				
				ctx.restore();
			};

			j++;
		}


		(function animloop(){
		  requestAnimFrame(animloop);
		  if(start)draw();
		})();


		// document.body.addEventListener("click", function(){
		// 	start = !start;
		// });
		document.getElementById("speed").addEventListener("change", function(val){
			speed = Math.round(this.value);
		});
		document.getElementById("download").addEventListener("click", function(){
			start = false;
			document.getElementById("download").href = canvas.toDataURL();
			document.getElementById("download").download = "Triangles.png";
		});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}