RanolP/logo-creator.html

## logo-creator.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>개수다 로고 생성기</title>

    <style>
        /* RESET */
        html,
        body {
            margin: 0;
            padding: 0;
            max-width: 100vw;
            min-height: 100vh;
        }
    </style>
    <style>
        body {
            background-color: #222;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        canvas {
            background-color: #ddd;
            display: block;
        }

        #download {
            border: none;
            margin: 1em;
            padding: 0.1em 1em;
            font-size: 2.5em;

            background-color: hsl(230, 45%, 65%);

            transition: background-color ease-in 0.1s;
        }

        #download:hover {
            background-color: hsl(230, 45%, 75%);
        }

        #download:active {
            background-color: hsl(230, 45%, 55%);
        }

        label {
            color: #ddd;
            font-size: 1.5em;
        }

        .hidden {
            opacity: 0;
            position: absolute;
            z-index: -1;
        }
    </style>
</head>

<body>
    <canvas id="logoCanvas" width="512" height="512"></canvas>
    <button id="download">PNG로 다운로드</button>
    <label for="backgroundColorInput">배경색</label>
    <input type="color" name="backgroundColorInput" id="backgroundColorInput">
    <label for="identityColorInput">개성색</label>
    <input type="color" name="identityColorInput" id="identityColorInput">
    <label for="subtitleInput">부제</label>
    <input type="text" id="subtitleInput" value="텔레그램 에디션">

    <svg id="logoSvg" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
        <defs>
            <linearGradient id="gradient" x1="-51.16" y1="112.77" x2="562.55" y2="398.95"
                gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#7a88cc" />
                <stop offset="0.8" stop-color="#40509e" />
                <stop offset="1" stop-color="#1a2b80" />
            </linearGradient>
            <mask id="balja">
                <polygon fill="white" points="180.67 147 175.33 208 292.33 208 297.67 147 180.67 147" />
                <text transform="translate(182.33 200)" style="font-size:60px;font-weight:400;">
                    발자
                </text>
            </mask>
            <style>
                * {
                    font-family: Noto Sans CJK KR;
                }


                .cls-6 {
                    letter-spacing: .04em
                }

                .notebook-outline {
                    fill: none;
                    stroke: #fff;
                    stroke-miterlimit: 10;
                    stroke-width: 3px
                }

                .notebook-filled {
                    fill: #fff
                }
            </style>
        </defs>
        <rect width="512" height="512" style="fill:url(#gradient)" />
        <text transform="translate(23.25 295.16)" style="font-weight:500;fill:#fff;font-size:180px">
            개
        </text>

        <polygon id="identity" points="180.67 147 175.33 208 292.33 208 297.67 147 180.67 147" mask="url(#balja)" />

        <text transform="translate(179.2 299.17)" style="font-weight:400;font-size:110px;fill:#fff">
            수다방
        </text>
        <text transform="translate(65.58 142.15)" style="letter-spacing:.04em;font-size:40px;font-weight:400;fill:#fff">
            Developers&apos;
        </text>
        <text transform="translate(217.82 341.84)"
            style="letter-spacing:.08em;font-size:40px;font-weight:400;fill:#fff">
            Talk Room
        </text>

        <polygon id="subtitleBackground" fill="#fff" points="95 410 75 380 95 350 417 350 437 380 417 410 95 410" />
        <text id="subtitle" x="256" y="396.17" text-anchor="middle" style="font-size:45px;fill:#134d3a;font-weight:500">
            텔레그램 에디션
        </text>
        <g class="notebook-outline">
            <line x1="422.77" y1="189.38" x2="364.56" y2="156.78" />
            <path
                d="M364.56,156.78l-36,20.44a4.66,4.66,0,0,0,0,8.08L375,212.24a9.3,9.3,0,0,0,9.44-.06l33.73-20.11a9.33,9.33,0,0,0,4.64-8.06l.23-39.6a9.3,9.3,0,0,0-4.64-8.11l-46.58-27a4.65,4.65,0,0,0-7,4l-.23,43.5" />
        </g>
        <g class="notebook-filled">
            <polygon points="363.64 198.11 348.46 188.68 358.05 182.98 373.68 192.18 363.64 198.11" />
            <ellipse cx="414.62" cy="143.98" rx="3.2" ry="3.81" transform="translate(28.42 352.53) rotate(-47.52)" />
        </g>
    </svg>
</body>

<script src="https://cdn.jsdelivr.net/npm/polished@3.5.0/dist/polished.min.js"
    integrity="sha256-lmjbBauzNLkDj/VmM45/kN7UkqPEDuS60xD+4vCySBg=" crossorigin="anonymous"></script>
<script>
    const serializer = new XMLSerializer();

    backgroundColorInput.value = '#7e8bce';
    identityColorInput.value = '#000000';

    function updateLogo() {
        const gradientBaseColor = backgroundColorInput.value;

        const stops = gradient.querySelectorAll('stop');

        stops[0].setAttribute('stop-color', gradientBaseColor);
        stops[1].setAttribute('stop-color', polished.darken(0.2, gradientBaseColor));
        stops[2].setAttribute('stop-color', polished.darken(0.4, gradientBaseColor));

        identity.setAttribute('fill', identityColorInput.value);

        subtitle.innerHTML = subtitleInput.value;

        const center = 256;
        const distance = Math.round(subtitle.getComputedTextLength() / 2) + 10;

        subtitleBackground.setAttribute('points', `${center - distance} 410 ${center - distance - 20} 380 ${center - distance} 350 ${center + distance} 350 ${center + distance + 20} 380 ${center + distance} 410 ${center - distance} 410`)

        // Draw Image to Canvas
        var img = document.createElement('img');
        const url = URL.createObjectURL(new Blob([serializer.serializeToString(logoSvg)], { type: 'image/svg+xml;charset=utf-8' }));

        img.onload = function () {
            logoCanvas.getContext('2d').drawImage(img, 0, 0);
            URL.revokeObjectURL(url);
        }
        img.src = url;
    }

    updateLogo();

    download.onclick = () => {
        const url = logoCanvas.toDataURL('image/png');

        const a = document.createElement('a');
        a.href = url;
        a.download = `개발자 수다방 ${subtitleInput.value} 로고.png`;
        a.click();
    }

    backgroundColorInput.onchange = updateLogo;
    identityColorInput.onchange = updateLogo;
    subtitleInput.onchange = updateLogo;
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>개수다 로고 생성기</title>

	<style>
	/* RESET */
	html,
	body {
	margin: 0;
	padding: 0;
	max-width: 100vw;
	min-height: 100vh;
	}
	</style>
	<style>
	body {
	background-color: #222;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	canvas {
	background-color: #ddd;
	display: block;
	}

	#download {
	border: none;
	margin: 1em;
	padding: 0.1em 1em;
	font-size: 2.5em;

	background-color: hsl(230, 45%, 65%);

	transition: background-color ease-in 0.1s;
	}

	#download:hover {
	background-color: hsl(230, 45%, 75%);
	}

	#download:active {
	background-color: hsl(230, 45%, 55%);
	}

	label {
	color: #ddd;
	font-size: 1.5em;
	}

	.hidden {
	opacity: 0;
	position: absolute;
	z-index: -1;
	}
	</style>
	</head>

	<body>
	<canvas id="logoCanvas" width="512" height="512"></canvas>
	<button id="download">PNG로 다운로드</button>
	<label for="backgroundColorInput">배경색</label>
	<input type="color" name="backgroundColorInput" id="backgroundColorInput">
	<label for="identityColorInput">개성색</label>
	<input type="color" name="identityColorInput" id="identityColorInput">
	<label for="subtitleInput">부제</label>
	<input type="text" id="subtitleInput" value="텔레그램 에디션">

	<svg id="logoSvg" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
	<defs>
	<linearGradient id="gradient" x1="-51.16" y1="112.77" x2="562.55" y2="398.95"
	gradientUnits="userSpaceOnUse">
	<stop offset="0" stop-color="#7a88cc" />
	<stop offset="0.8" stop-color="#40509e" />
	<stop offset="1" stop-color="#1a2b80" />
	</linearGradient>
	<mask id="balja">
	<polygon fill="white" points="180.67 147 175.33 208 292.33 208 297.67 147 180.67 147" />
	<text transform="translate(182.33 200)" style="font-size:60px;font-weight:400;">
	발자
	</text>
	</mask>
	<style>
	* {
	font-family: Noto Sans CJK KR;
	}


	.cls-6 {
	letter-spacing: .04em
	}

	.notebook-outline {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 3px
	}

	.notebook-filled {
	fill: #fff
	}
	</style>
	</defs>
	<rect width="512" height="512" style="fill:url(#gradient)" />
	<text transform="translate(23.25 295.16)" style="font-weight:500;fill:#fff;font-size:180px">
	개
	</text>

	<polygon id="identity" points="180.67 147 175.33 208 292.33 208 297.67 147 180.67 147" mask="url(#balja)" />

	<text transform="translate(179.2 299.17)" style="font-weight:400;font-size:110px;fill:#fff">
	수다방
	</text>
	<text transform="translate(65.58 142.15)" style="letter-spacing:.04em;font-size:40px;font-weight:400;fill:#fff">
	Developers'
	</text>
	<text transform="translate(217.82 341.84)"
	style="letter-spacing:.08em;font-size:40px;font-weight:400;fill:#fff">
	Talk Room
	</text>

	<polygon id="subtitleBackground" fill="#fff" points="95 410 75 380 95 350 417 350 437 380 417 410 95 410" />
	<text id="subtitle" x="256" y="396.17" text-anchor="middle" style="font-size:45px;fill:#134d3a;font-weight:500">
	텔레그램 에디션
	</text>
	<g class="notebook-outline">
	<line x1="422.77" y1="189.38" x2="364.56" y2="156.78" />
	<path
	d="M364.56,156.78l-36,20.44a4.66,4.66,0,0,0,0,8.08L375,212.24a9.3,9.3,0,0,0,9.44-.06l33.73-20.11a9.33,9.33,0,0,0,4.64-8.06l.23-39.6a9.3,9.3,0,0,0-4.64-8.11l-46.58-27a4.65,4.65,0,0,0-7,4l-.23,43.5" />
	</g>
	<g class="notebook-filled">
	<polygon points="363.64 198.11 348.46 188.68 358.05 182.98 373.68 192.18 363.64 198.11" />
	<ellipse cx="414.62" cy="143.98" rx="3.2" ry="3.81" transform="translate(28.42 352.53) rotate(-47.52)" />
	</g>
	</svg>
	</body>

	<script src="https://cdn.jsdelivr.net/npm/polished@3.5.0/dist/polished.min.js"
	integrity="sha256-lmjbBauzNLkDj/VmM45/kN7UkqPEDuS60xD+4vCySBg=" crossorigin="anonymous"></script>
	<script>
	const serializer = new XMLSerializer();

	backgroundColorInput.value = '#7e8bce';
	identityColorInput.value = '#000000';

	function updateLogo() {
	const gradientBaseColor = backgroundColorInput.value;

	const stops = gradient.querySelectorAll('stop');

	stops[0].setAttribute('stop-color', gradientBaseColor);
	stops[1].setAttribute('stop-color', polished.darken(0.2, gradientBaseColor));
	stops[2].setAttribute('stop-color', polished.darken(0.4, gradientBaseColor));

	identity.setAttribute('fill', identityColorInput.value);

	subtitle.innerHTML = subtitleInput.value;

	const center = 256;
	const distance = Math.round(subtitle.getComputedTextLength() / 2) + 10;

	subtitleBackground.setAttribute('points', `${center - distance} 410 ${center - distance - 20} 380 ${center - distance} 350 ${center + distance} 350 ${center + distance + 20} 380 ${center + distance} 410 ${center - distance} 410`)

	// Draw Image to Canvas
	var img = document.createElement('img');
	const url = URL.createObjectURL(new Blob([serializer.serializeToString(logoSvg)], { type: 'image/svg+xml;charset=utf-8' }));

	img.onload = function () {
	logoCanvas.getContext('2d').drawImage(img, 0, 0);
	URL.revokeObjectURL(url);
	}
	img.src = url;
	}

	updateLogo();

	download.onclick = () => {
	const url = logoCanvas.toDataURL('image/png');

	const a = document.createElement('a');
	a.href = url;
	a.download = `개발자 수다방 ${subtitleInput.value} 로고.png`;
	a.click();
	}

	backgroundColorInput.onchange = updateLogo;
	identityColorInput.onchange = updateLogo;
	subtitleInput.onchange = updateLogo;
	</script>

	</html>