var C = .551915024494, 
		NS_URI = 'http://www.w3.org/2000/svg', 
		CUBIC_N = 3, 
		DURATION = 120 /* animation duration */, 
		N_LAYERS = 7 /* layers around midpoint */, 
		N_POLY = 6 /* type of poly distribution */, 
		PALETTE = [[220, 20, 60], [255, 215, 0]], 
		items = [] /* morphing shapes */, 
		n /* their count */, 
		timeline = [],
		a /* amplitude of item jump */, 
		off /* base time offset */;

/* create an item morphing heart -> star */
var createItem = function(parent, layer) {
	var pos /* positioner */, ani /* morpher */;
	
	pos = document.createElementNS(NS_URI, 'g');
	ani = document.createElementNS(NS_URI, 'path');
	ani.setAttribute('d', timeline[0].d);
	ani.setAttribute('fill', timeline[0].rgb);
	pos.appendChild(ani);
	parent.appendChild(pos);
	items.push({ 'ani': ani, 'layer': layer });
	
	return pos;
};

/* create polygonal distribution */
var createDistribution = function(container, bri) {
	var bri = bri || 100, 
			α, be, lri, le, lrc, β, de, d, γ, x, y, 
			layer = N_LAYERS, frag, pos;
	
	frag = document.createDocumentFragment();
	α = 2*Math.PI/N_POLY; // central angle
	be = 2*bri*Math.tan(.5*α); // base edge
	
	while(layer--) {
		if(layer) {
			lri = layer*bri; // layer inradius
			le = layer*be; // layer edge
			lrc = lri/Math.cos(.5*α); // layer circumrad
			
			/* take each edge */
			for(var i = 0; i < N_POLY; i++) {
				β = (i - .5)*α + .5*Math.PI;
				
				for(var j = 0; j < layer; j++) {
					de = (.5*layer - j)*be;
					d = Math.hypot(lri, de);
					γ = β + .5*α + Math.atan(de/lri);
					
					x = d*Math.cos(γ);
					y = d*Math.sin(γ);
					
					pos = createItem(frag, layer);
					pos.setAttribute(
						'transform', 
						'translate(' + x + ' ' + y + ')'
					);
				}
			}
		}
		else createItem(frag, 0);
	}
	
	container.appendChild(frag);
};

var getHeartPoints = function(d) {
	var points = [], rp = .25*d, dv = .75*d, 
			kp = C*rp, xo = 2*rp, 
			kh = -rp - kp, kl = xo + kp;
	
	points = [
		[0, -rp], 
		[kp, kh], [xo - kp, kh], [xo, -rp], 
		[kl, kp - rp], [kl, rp - kp], [xo, rp], 
		[0, dv], [0, dv], [-xo, rp], // #3
		[-kl, rp - kp], [-kl, kp - rp], [-xo, -rp], 
		[kp - xo, kh], [-kp, kh], [0, -rp]
	];
	
	return points;
};

var getStarPoints = function(d) {
	var points = [], 
			n_penta = 5, nt = 2*n_penta, 
			α = 2*Math.PI/n_penta, 
			β = (n_penta - 2)*Math.PI/n_penta, 
			γ = Math.PI - β, δ = .5*α, 
			rin = d/(1 + Math.cos(δ) + Math.sin(δ)* Math.tan(γ)), 
			rout = d - rin, 
			φ, r, x, y;
	
	for(var i = 0; i <= nt; i++) {
		r = (i%2)?rout:rin;
		φ = i*δ - .5*Math.PI;
		
		x = r*Math.cos(φ);
		y = r*Math.sin(φ);
		
		points.push([x, y]);
		if(i%2) points.push([x, y]); // ctrl pt
	}
	
	return points;
};

var getTimeline = function(keypoints, duration) {
	var tl = [], n_curves = 5, pre = ['M'], np, 
			k, k1, d, rgb, x, y;
	
	for(var i = 0; i < n_curves; i++) {
		for(var j = 0; j < CUBIC_N; j++) {
			pre.push(j ? ',' : 'C');
		}
	}
	
	np = pre.length;
	
	for(var i = 0; i <= duration; i++) {
		k = i/duration;
		k1 = 1 - k;
		d = '';
		rgb = [];
		
		for(var j = 0; j < np; j++) {
			x = k1*keypoints[0][j][0] + k*keypoints[1][j][0];
			y = k1*keypoints[0][j][1] + k*keypoints[1][j][1];
			d += pre[j] + Math.round(x) + ' ' + Math.round(y);
		}
		
		for(var j = 0; j < 3; j++) {
			rgb.push(Math.round(k1*PALETTE[0][j] + k*PALETTE[1][j]));
		}
		
		tl.push({'d': d + 'z', 'rgb': 'rgb(' + rgb + ')'});
	}
	
	return tl;
};

var ani = function(t) {
	var t_rel, d, φ, y, j, k, α;
	
	/* go through all items */
	for(var i = 0; i < n; i++) {
		t_rel = (t - items[i].layer*off + DURATION)%DURATION;
		d = 4*t_rel/DURATION;
		φ = d*Math.PI;
		y = -Math.round(a*Math.sin(φ));
		
		if(y <= 0) {
			j = 1 - Math.cos(φ);
			k = Math.floor(d/2);
			α = Math.round(j*90) + k*180;
			j = ~~((k*1 + .5*j*Math.pow(-1, k))*.25*DURATION);
			
			items[i].ani.setAttribute(
				'transform', 
				'translate(0 ' + y + ') rotate(' + α + ')'
			);
			items[i].ani.setAttribute('d', timeline[j].d);
			items[i].ani.setAttribute('fill', timeline[j].rgb);
		}
	}
	
	requestAnimationFrame(ani.bind(this, ++t));
};

(function init() {
	var svg, s, w, h, hdiag, bri, d;
	
	/* get svg element, set a viewbox */
	svg = document.querySelector('svg');
	s = getComputedStyle(svg);
	w = ~~s.width.split('px')[0];
	h = ~~s.height.split('px')[0];
	svg.setAttribute(
		'viewBox' /* `viewbox` won't work! */, 
		[-w, -h, 2*w, 2*h]
	);
	
	/* compute stuff needed to create shapes */
	hdiag = Math.hypot(w, h); // half diagonal
	bri = hdiag/(N_LAYERS - .5) // base inradius for distr
	a = d = .5*bri;
	
	/* create timeline */
	timeline = getTimeline(
		[getHeartPoints(d), getStarPoints(d)], 
		.25*DURATION
	);
	
	/* create & position items */
	createDistribution(svg, bri);
	n = items.length;
	off = Math.round(.25*DURATION/(.5*N_LAYERS));
	
	/* start animation */
	ani(0);
})();