A Pen by Louis Hoebregts.

index.html

<canvas id="canvas"></canvas>
	<div class="form">
		<label>
			Triangles : <input id="triangles" type="range" min="2" max="100" value="30">
		</label>
		<label>
			Speed : <input id="speed" type="range" min="0" max="100" value="50">
		</label>
		<label>
			Size : <input id="size" type="range" min="0" max="100" value="50">
		</label>
		<label>
			Invert : <input id="invert" type="checkbox" value="true">
		</label>
		<label>
			Mask : <input id="mask" type="checkbox" value="true">
		</label>
		<label>
			Color : <input id="color" type="color" value="#3c1450">
		</label>
		<label>
			Border : <input id="border" type="color" value="#ffffff">
		</label>
		<button id="pause">Pause</button>
		<button>
			<a href="" id="download" download="fileName">Download</a>
		</button>
	</div>

script.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,
			size 	  = 50,
			height    = wh*(size/75),
			x         = ww/2,
			y         = (wh-height)/2-(height/7),
			triangles = 30,
			colors    = [],
			colorD 	  = [60, 20, 80],
			start     = true,
			speed     = 40,
			g         = [x, y+(height*2/3)],
			invert	  = -1,
			border 	  = "#ffffff",
			mask 	  = false;

		canvas.width  = ww;
		canvas.height = wh;
		ctx.lineWidth   = 1;

		//Set the shading colors
		function setColor(){
			for (var i=0;i<=triangles;i++){
				colors[i] = "rgba("+(colorD[0]+(i*(triangles/6)))+","+(colorD[1]+(i*(triangles/6)))+","+(colorD[2]+(i*(triangles/6)))+",1)";
			}
		}
		setColor();

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

			ctx.clearRect(0,0,ww,wh);
			ctx.save();
			
			for (var i=0;i<=triangles;i++){
				var nHeight = height-(height/triangles)*i;

				ctx.fillStyle = colors[i];
				ctx.strokeStyle = border;

				if(mask){
					ctx.beginPath();
				    ctx.moveTo(g[0],g[1]-nHeight*2/3);
					ctx.lineTo(g[0]+nHeight/Math.sqrt(3), g[1]+nHeight*1/3);
					ctx.lineTo(g[0]-nHeight/Math.sqrt(3), g[1]+nHeight*1/3);
					ctx.lineTo(g[0],g[1]-nHeight*2/3);
				    ctx.clip();
				}

				ctx.translate( g[0],g[1] );
				ctx.rotate(invert*i*j/(-speed*80));
				ctx.translate( -g[0],-g[1] );

				ctx.beginPath();
				ctx.moveTo(g[0],g[1]-nHeight*2/3);
				ctx.lineTo(g[0]+nHeight/Math.sqrt(3), g[1]+nHeight*1/3);
				ctx.lineTo(g[0]-nHeight/Math.sqrt(3), g[1]+nHeight*1/3);
				ctx.lineTo(g[0],g[1]-nHeight*2/3);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();

				
			};
			ctx.restore();

			j++;
		}


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


		document.getElementById("speed").addEventListener("change", function(){
			speed = Math.round(101-this.value);
		});
		document.getElementById("triangles").addEventListener("change", function(){
			triangles = Math.round(this.value);
		});
		document.getElementById("invert").addEventListener("change", function(){
			invert = document.getElementById("invert").checked;
			if(invert)invert=1;
			else invert = -1;
		});
		document.getElementById("mask").addEventListener("change", function(){
			mask = document.getElementById("mask").checked;
			console.log(mask);
		});
		document.getElementById("size").addEventListener("change", function(){
			size	= this.value;
			height	= wh*(size/75);
		});
		document.getElementById("color").addEventListener("change", function(){
			colorD = [];
			colorD[0] = parseInt(this.value.slice(1,3), 16);
		    colorD[1] = parseInt(this.value.slice(3,5), 16);
		    colorD[2] = parseInt(this.value.slice(5,8), 16);
		    setColor();
		});
		document.getElementById("border").addEventListener("change", function(){
		    border = this.value;
		});
		document.getElementById("pause").addEventListener("click", function(){
			start = !start;
			if(start)document.getElementById("pause").innerHTML = "Pause";
			else document.getElementById("pause").innerHTML = "Play";
		});
		document.getElementById("download").addEventListener("click", function(){
			document.getElementById("download").href = canvas.toDataURL();
			document.getElementById("download").download = "Triangles.png";
		});

style.css

html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background: black;
			overflow: hidden;
			font-family: Helvetica, arial, sans-serif;
		}
		.form{
			position: fixed;top: 20px;left:10px;
			color: white;
			border: 1px solid white;
			padding: 20px;
			background: rgba(255,255,255,.1);
		}
		label{display: block;}
		input[type=range]{width:150px;}
		a{color:black;text-decoration: none;}
		a:hover{text-decoration: underline;}
		button{background: white;border: none;padding: 5px;display: block;text-align: center;width:100px;}
		label,button{margin:10px 0;}

TrianglCeption.markdown

TrianglCeption

A Pen by Louis Hoebregts on CodePen.

License.