<div id="app" class="sky"></div>

* {
	padding: 0;
	margin: 0;
}

.sky {
	background-image: linear-gradient(135deg, #abdcff 10%, #0396ffc7 100%);
	height: 100vh;
	width: 100%;
	perspective: 200px;
	overflow: hidden;
}

/**
 * See the making of here : https://codepen.io/emilienleroy/pen/LYWEPoJ
 * Made with all my love on Twitch.tv ! <3
 *
 * Follow me :p
 * https://twitch.tv/emilienjc
 * https://github.com/EmilienLeroy
 * https://codepen.io/emilienleroy/
 * https://twitter.com/LeroyEmilien
 */
const app = document.querySelector("#app");

createBirds(0);

function createBirds(interval) {
	setTimeout(() => {
		const color = createRandomColor();
		app.append(createBird(color));
		createBirds(random(3));
	}, interval);
}

function createBird(color = "blue") {
	const x = random(3) - 200;
	const y = random(3) - 200;
	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

	svg.style.position = "absolute";

	path.setAttribute("fill", color);
	path.setAttribute(
		"d",
		`
        M 120 0
        C 100 10     115 50   150 150
        C 185 50   200 0   180 0
        C 200 0     150 90   150 100
        C 150 90   100 10    120 0
        Z
    `
	);

	path.innerHTML = `
        <animate 
            attributeType="CSS"
            attributeName="d" 
            values="
                M 120 0
                C 100 10     115 50   150 150
                C 185 50   200 0   180 0
                C 200 0     150 90   150 100
                C 150 90   100 10    120 0
                Z;

                M 75 0
                C 90 10     140 100   150 150
                C 160 100   210 10   225 0
                C 210 0     150 90   150 100
                C 150 90    90 0    75 0
                Z;

                M 20 130
                C 30 120    130 70   150 150
                C 170 70    270 120   280 130
                C 280 110   180 75   150 100
                C 120 75    20 110     20 130
                Z;

                M 75 0
                C 90 10     140 100   150 150
                C 160 100   210 10   225 0
                C 210 0     150 90   150 100
                C 150 90    90 0    75 0
                Z;

                M 120 0
                C 100 10     115 50   150 150
                C 185 50   200 0   180 0
                C 200 0     150 90   150 100
                C 150 90   100 10    120 0
                Z;
            "
            fill="freeze"
            keyTimes="0; 0.15; 0.5; 0.85; 1"
            dur="1s" 
            repeatCount="indefinite"
        />
    `;

	svg.append(path);
	svg.animate(
		[
			{ transform: `translate3d(${x}px, ${y}px, 200px)`, opacity: 1 },
			{ transform: `translate3d(${x}px, ${y}px, -500px)`, opacity: 1 },
			{ transform: `translate3d(${x}px, ${y}px, -1000px)`, opacity: 0 }
		],
		{
			duration: 10000
		}
	).onfinish = () => {
		svg.remove();
	};

	return svg;
}

function random(digit) {
	let number = Math.round(Math.random() * Math.pow(10, digit));

	if (String(number).length !== digit) {
		number = Number(`${String(number)}${Math.round(Math.random() * 10)}`);
	}

	return number;
}

/**
 * Create a random color.
 * https://stackoverflow.com/questions/1484506/random-color-generator
 */
function createRandomColor() {
	let letters = "0123456789ABCDEF";
	let color = "#";
	for (let i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}

	return color;
}