kartiknair/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="//rsms.me/inter/inter.css" />
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Inter', sans-serif;
			}

			main {
				width: 100%;
				height: 85%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			input {
				margin-top: 2.5rem;
				width: 15rem;
				display: block;
				padding: 0.6rem;
				border: 1px solid #999;
				border-radius: 0.2rem;
				font-family: inherit;
				font-size: 0.85rem;
				transition: all 200ms ease;
			}

			.avatar {
				width: 5rem;
				height: 5rem;
				border-radius: 50%;
				background: #000000;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.15rem;
			}
		</style>
		<title>Nice random gradients</title>
	</head>
	<body>
		<main>
			<div class="avatar">?</div>
			<input type="text" placeholder="Your string here..." />
		</main>
		<script src="/main.js" type="module"></script>
	</body>
</html>

## main.js
import {
	mix,
	readableColor,
} from 'https://unpkg.com/color2k@1.1.0/index.esm.js'

/*
    These two functions (getHash & hashToRgba) are taken from
    create-color: https://github.com/stuneak/create-color/
*/
function getHash(str) {
	const s = JSON.stringify(str)
	return s.split('').reduce((a, _, i) => (a += s.charCodeAt(i) + (a << 5)), 0)
}

function hashToRgba(hash, transparency) {
	return `rgba(${(hash & 0xff0000) >> 16},${(hash & 0x00ff00) >> 8},${
		hash & 0x0000ff
	}, ${transparency})`
}

function splitToChunks(array, parts) {
	let result = []
	for (let i = parts; i > 0; i--) {
		result.push(array.splice(0, Math.ceil(array.length / i)))
	}
	return result
}

function generateGradient(str) {
	const strArr = splitToChunks(str.split(''), 3)
		.map((arr) => arr.join(''))
		.map((part) => getHash(part || ''))
	const colors = strArr.map((el) => hashToRgba(el, '0.75'))

	const mixedColor = mix(colors[2], mix(colors[0], colors[1], 0.25), 0.75)

	return {
		colors,
		mixedColor,
	}
}

function getInitials(name) {
	name = name.trim()
	const nameSplitBySpace = name.split(' ')

	if (name) {
		return nameSplitBySpace.length > 1
			? nameSplitBySpace[0][0].toUpperCase() +
					nameSplitBySpace[
						nameSplitBySpace.length - 1
					][0].toUpperCase()
			: name.length > 1
			? name[0].toUpperCase() + name[1].toUpperCase()
			: name[0].toUpperCase()
	} else return '?'
}

/*
    --- Demo specific stuff from here on ---
*/

const inputEl = document.querySelector('input')
const avatar = document.querySelector('.avatar')

inputEl.addEventListener('input', (e) => {
	const { colors, mixedColor } = generateGradient(e.target.value)

	avatar.style.background = `
        radial-gradient(
            100% 100% at 35% 10%,
            ${colors[0]} 0,
            hsla(0, 0%, 100%, 0) 100%
        ),
        radial-gradient(
            100% 100% at 100% 25%,
            ${colors[1]} 0,
            hsla(0, 0%, 100%, 0) 100%
        ),
        radial-gradient(
            100% 100% at 45% 100%,
            ${colors[2]} 0,
            hsla(0, 0%, 100%, 0) 100%
        )`

	avatar.style.color = readableColor(mixedColor)
	avatar.innerHTML = getInitials(e.target.value)
})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="//rsms.me/inter/inter.css" />
	<style>
	html,
	body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	}

	main {
	width: 100%;
	height: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}

	input {
	margin-top: 2.5rem;
	width: 15rem;
	display: block;
	padding: 0.6rem;
	border: 1px solid #999;
	border-radius: 0.2rem;
	font-family: inherit;
	font-size: 0.85rem;
	transition: all 200ms ease;
	}

	.avatar {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: #000000;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.15rem;
	}
	</style>
	<title>Nice random gradients</title>
	</head>
	<body>
	<main>
	<div class="avatar">?</div>
	<input type="text" placeholder="Your string here..." />
	</main>
	<script src="/main.js" type="module"></script>
	</body>
	</html>
	import {
	mix,
	readableColor,
	} from 'https://unpkg.com/color2k@1.1.0/index.esm.js'

	/*
	These two functions (getHash & hashToRgba) are taken from
	create-color: https://github.com/stuneak/create-color/
	*/
	function getHash(str) {
	const s = JSON.stringify(str)
	return s.split('').reduce((a, _, i) => (a += s.charCodeAt(i) + (a << 5)), 0)
	}

	function hashToRgba(hash, transparency) {
	return `rgba(${(hash & 0xff0000) >> 16},${(hash & 0x00ff00) >> 8},${
	hash & 0x0000ff
	}, ${transparency})`
	}

	function splitToChunks(array, parts) {
	let result = []
	for (let i = parts; i > 0; i--) {
	result.push(array.splice(0, Math.ceil(array.length / i)))
	}
	return result
	}

	function generateGradient(str) {
	const strArr = splitToChunks(str.split(''), 3)
	.map((arr) => arr.join(''))
	.map((part) => getHash(part \|\| ''))
	const colors = strArr.map((el) => hashToRgba(el, '0.75'))

	const mixedColor = mix(colors[2], mix(colors[0], colors[1], 0.25), 0.75)

	return {
	colors,
	mixedColor,
	}
	}

	function getInitials(name) {
	name = name.trim()
	const nameSplitBySpace = name.split(' ')

	if (name) {
	return nameSplitBySpace.length > 1
	? nameSplitBySpace[0][0].toUpperCase() +
	nameSplitBySpace[
	nameSplitBySpace.length - 1
	][0].toUpperCase()
	: name.length > 1
	? name[0].toUpperCase() + name[1].toUpperCase()
	: name[0].toUpperCase()
	} else return '?'
	}

	/*
	--- Demo specific stuff from here on ---
	*/

	const inputEl = document.querySelector('input')
	const avatar = document.querySelector('.avatar')

	inputEl.addEventListener('input', (e) => {
	const { colors, mixedColor } = generateGradient(e.target.value)

	avatar.style.background = `
	radial-gradient(
	100% 100% at 35% 10%,
	${colors[0]} 0,
	hsla(0, 0%, 100%, 0) 100%
	),
	radial-gradient(
	100% 100% at 100% 25%,
	${colors[1]} 0,
	hsla(0, 0%, 100%, 0) 100%
	),
	radial-gradient(
	100% 100% at 45% 100%,
	${colors[2]} 0,
	hsla(0, 0%, 100%, 0) 100%
	)`

	avatar.style.color = readableColor(mixedColor)
	avatar.innerHTML = getInitials(e.target.value)
	})