initial commit

js/pride.js

@@ -0,0 +1,43 @@
+const flags = [
+	{
+		id: 'gradient-pride',
+		colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'],
+		transform: 'rotate(90)'
+	}, {
+		id: 'gradient-trans',
+		colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'],
+		transform: 'rotate(90)'
+	}
+];
+
+const generateGradient = colors => {
+	const steps = colors.length;
+	return steps.map((color, index) => { return [
+		[color, (index / steps)],
+		[color, (index + 1) / steps]
+	]}).flat();
+};
+
+const generateStops = (colors, opacity) => {
+	return generateGradient(colors).map((color, offset) => {
+		return `<stop stop-color="${color}" stop-opacity="${opacity}" offset="${offset * 100}%"></stop>`;
+	});
+};
+
+const makeLinearGradientSvg = (id, colors, opacity, transform) => {
+	return `<svg xmlns="http://www.w3.org/2000/svg">
+		  <defs>
+		    <linearGradient id="${id}" gradientTransform="${transform}">
+		      ${generateStops(colors, opacity)}
+		    </linearGradient>
+		  </defs>
+		</svg>`;
+};
+
+flags.forEach(flag => {
+	const container = document.createElement('div');
+	container.classList.add('hidden-visually');
+	container.ariaHidden = true;
+	container.innerHTML = makeLinearGradientSvg(flag.id, flag.colors, flag.opacity ?? '0.8', flag.transform ?? 'rotate(0)');
+	document.body.prepend(container);
+});