Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		#output {
			font-size: 3rem;
			margin: 0;
			padding: 0.5rem;
			line-height: 1.2;
			white-space: pre;
			word-wrap: break-word;
			word-break: break-all;
			width: 100vw;
		}
	</style>
</head>
<body>

<h1 id="output">compositing...</h1>

<script>
	const skinTones = ["1F3FB", "1F3FC", "1F3FD", "1F3FE", "1F3FF"];
	const adults = ["1F468", "1F469"];
	const kids = ["1F466", "1F467", "1F476"];
	const professions = ["2695 FE0F", "1F393", "1F3EB", "1F33E", "1F373", "1F3ED", "1F4BC", "1F52C", "1F4BB", "1F3A4", "1F3A8", "2708 FE0F", "1F680", "1F692"];
	const zwj = "200D";
	const newline = "0A";

	const get = (arr) => arr[Math.round(Math.random() * (arr.length - 1))];
	const getSkinTone = () => get(skinTones);
	const getAdult = () => get(adults);
	const getKid = () => get(kids);
	const getProfession = () => get(professions);
	const getFamily = () => `${ getAdult() } ${ getSkinTone() } ${ zwj } ${ getProfession() } ${ zwj } ${ getAdult() } ${ getSkinTone() } ${ zwj } ${ getKid() } ${ getSkinTone() } ${ zwj } ${ getKid() } ${ getSkinTone() }`;
	const getCommunity = () => `${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() } ${ zwj } ${ getFamily() }`;

	const entries = [];
	for (let i = 1; i < 100; i++) {
		entries.push(getCommunity());
	}

	const result = entries
		.join(` ${ newline } `)
		.split(" ")
		.map(str => parseInt(str, 16))
		.map(code => String.fromCodePoint(code))
		.reduce((value, accum) => value + accum, "");

	console.log(result.length);

	document.getElementById("output").innerHTML = result;
</script>

</body>
</html>