Skip to content

Instantly share code, notes, and snippets.

@RanolP

RanolP/logo-creator.html

Created December 11, 2022 05:55
Show Gist options
  • Save RanolP/acb73133129bc77388dc6fbdc4ddc3ab to your computer and use it in GitHub Desktop.
Save RanolP/acb73133129bc77388dc6fbdc4ddc3ab to your computer and use it in GitHub Desktop.
Download ZIP
개발자 수다방 로고 생성기 응모 작품 (탈락)
Raw
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/[email protected]/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment