LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}
JS
// Hacks abound. Beware!

const MODES = {
	DEFAULT: 0,
	XRAY: 1,
	GLITCH: 2,
	OUTLINE: 3,
};

// Play with these constants for quick funtimes!!
const MODE = MODES.DEFAULT;
const C_FG = [134, 153, 209];
const C_BG = [219, 169, 206];
const C_DOT = [71, 209, 213];
const SIZE = 540;
const N = 3;
const D = SIZE/7;
const W = SIZE/2 - SIZE/10;
const H = SIZE/10;
const MAGNITUDE = H/3;
const DAMPING = 60;

// Play with the other stuff too!!
const simplex = new SimplexNoise();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Create our pattern.
canvas.height = canvas.width = 16;
ctx.fillStyle = `rgb(${C_FG})`;
ctx.fillRect(0, 0, 16, 16);
ctx.fillStyle = `rgb(${C_DOT})`;
ctx.arc(8, 8, 2, 0, 2 * Math.PI);
ctx.fill();
const pattern = ctx.createPattern(canvas, 'repeat');

// Stretch our canvas to the proper size & color.
canvas.height = canvas.width = SIZE;
canvas.style.height = canvas.style.width = `${SIZE/2}px`;
ctx.transform(1, 0, 0, -1, SIZE/2, SIZE/2);
ctx.strokeStyle = `#000`;
ctx.lineWidth = 4;
ctx.lineCap = ctx.lineJoin = 'round';
ctx.fillStyle = `rgb(${C_BG})`;
ctx.fillRect(-SIZE/2, -SIZE/2, SIZE, SIZE);
ctx.fillStyle = `rgba(${C_BG}, 0.1)`;
ctx.globalCompositeOperation = ['source-over', 'soft-light', 'xor', 'lighten'][MODE];

// Util functions for getting y components.
const circle = x => Math.sqrt((1 - x*x / W/W) * D*D)
const noise = (x, y, t) => MAGNITUDE * (
	1 + simplex.noise3D(x/DAMPING, y/DAMPING,
						3*t/DAMPING/DAMPING));

// Go for it.
!function step (t) {
	ctx.clearRect(-SIZE/2, -SIZE/2, SIZE, SIZE);
	ctx.save();
	ctx.fillStyle = pattern;
	[1, -1].forEach((sign, isBottom) => {
		const x0 = W*sign;
		const a0 = isBottom * Math.PI;
		const a1 = (isBottom - 1) * -Math.PI;
		for (let c = 0; c < N; ++c) {
			let o = isBottom ? N-1 - c : c;
			const _O = 6/(o+6);
			const _W = W * _O;
			const _D = D * _O;

			ctx.beginPath();
			ctx.ellipse(0, -H/2, _W, _D, 0, a0, a1);
			for (let i = -_W; i <= _W; ++i) {
				const x = sign*i;
				const y = (H/2 + sign*circle(i/_O)) * _O;
				ctx.lineTo(x, y + noise(x, y, t));
			}
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
		}
	});
	ctx.beginPath();
	ctx.moveTo(-W, -H);
	ctx.lineTo(-W, 0);
	ctx.moveTo(W, -H);
	ctx.lineTo(W, 0);
	ctx.stroke();
	
	ctx.beginPath();
	ctx.ellipse(0, -H, W, D, 0, Math.PI, 0);
	for (let i = W; i >= -W; --i) {
		const x = i;
		const y = -H*2 - circle(i);
		ctx.lineTo(x, y - noise(x, y, t));
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	window.requestAnimationFrame(step);
}(0);

document.body.style.background = `rgb(${C_BG})`;
document.body.appendChild(canvas);
Term
Sat, 01/13/2018 - 16:14

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv