feat(login): 스플릿 레이아웃 + 로고 리디자인 (좌 브랜드 히어로 / 우 폼)
This commit is contained in:
chpark
@@ -2,12 +2,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||
<defs>
|
||||
<linearGradient id="fg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2E8B57"/>
|
||||
<stop offset="0%" stop-color="#1b5e3a"/>
|
||||
<stop offset="100%" stop-color="#3CB371"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="url(#fg)"/>
|
||||
<text x="32" y="42" font-family="Helvetica, Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-1">MOMO</text>
|
||||
<circle cx="52" cy="12" r="1.8" fill="#ffffff" opacity="0.9"/>
|
||||
<circle cx="56" cy="18" r="1.2" fill="#ffffff" opacity="0.7"/>
|
||||
<rect width="64" height="64" rx="16" fill="url(#fg)"/>
|
||||
<!-- Stylized M with sparkle -->
|
||||
<text x="32" y="43" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-2">M</text>
|
||||
<circle cx="51" cy="14" r="2" fill="#ffffff" opacity="0.95"/>
|
||||
<circle cx="56" cy="20" r="1.2" fill="#ffffff" opacity="0.7"/>
|
||||
<circle cx="47" cy="9" r="1.1" fill="#ffffff" opacity="0.6"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 685 B After Width: | Height: | Size: 799 B |
+41
-32
@@ -1,43 +1,52 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 140" width="420" height="140">
|
||||
<style>
|
||||
.momo-text { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 110px; fill: #2E8B57; letter-spacing: -4px; }
|
||||
</style>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="480" height="160">
|
||||
<defs>
|
||||
<linearGradient id="momoG" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#1b5e3a"/>
|
||||
<stop offset="55%" stop-color="#2E8B57"/>
|
||||
<stop offset="100%" stop-color="#3CB371"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sparkleG" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#7ED9A7" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#7ED9A7" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#7ED9A7" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- MOMO 텍스트 -->
|
||||
<text x="0" y="108" class="momo-text">MOMO</text>
|
||||
<!-- Magical trail sweeping across the letters -->
|
||||
<path d="M 10 118 Q 120 98 240 118 T 470 108"
|
||||
fill="none" stroke="url(#sparkleG)" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<!-- 요정 (stylized figure) above last O -->
|
||||
<g fill="#2E8B57" transform="translate(352 12)">
|
||||
<!-- MOMO wordmark -->
|
||||
<g fill="url(#momoG)" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-weight="900">
|
||||
<text x="0" y="120" font-size="128" letter-spacing="-6">MOMO</text>
|
||||
</g>
|
||||
|
||||
<!-- Fairy silhouette above the second O -->
|
||||
<g fill="url(#momoG)" transform="translate(395 6)">
|
||||
<!-- hair -->
|
||||
<path d="M 12 2 Q 6 -2 3 5 Q 8 3 14 5 Z"/>
|
||||
<!-- head -->
|
||||
<circle cx="10" cy="6" r="3.8"/>
|
||||
<!-- hair flair -->
|
||||
<path d="M 7 3 Q 4 0 2 4 Q 6 3 8 4 Z"/>
|
||||
<!-- body / dress -->
|
||||
<path d="M 10 10 L 5 30 L 8 30 L 10 18 L 12 30 L 15 30 Z"/>
|
||||
<!-- left arm (holding wand) -->
|
||||
<path d="M 10 12 L 20 6 L 22 8 L 12 14 Z"/>
|
||||
<circle cx="13" cy="9" r="4.2"/>
|
||||
<!-- body / dress flowing -->
|
||||
<path d="M 13 13 Q 7 22 6 34 L 20 34 Q 19 22 13 13 Z"/>
|
||||
<!-- arm with wand -->
|
||||
<path d="M 14 15 L 29 7 L 31 10 L 16 18 Z"/>
|
||||
<!-- wand star -->
|
||||
<g transform="translate(22 3)">
|
||||
<path d="M 2 0 L 2.6 1.8 L 4.4 1.8 L 3 2.9 L 3.6 4.6 L 2 3.5 L 0.4 4.6 L 1 2.9 L -0.4 1.8 L 1.4 1.8 Z"/>
|
||||
<g transform="translate(30 3) scale(0.7)">
|
||||
<path d="M 3 0 L 4 2.5 L 7 2.8 L 4.7 4.7 L 5.5 7.5 L 3 6 L 0.5 7.5 L 1.3 4.7 L -1 2.8 L 2 2.5 Z"/>
|
||||
</g>
|
||||
<!-- wings -->
|
||||
<path d="M 5 14 Q -3 10 -2 22 Q 3 20 7 18 Z" opacity="0.55"/>
|
||||
<path d="M 15 14 Q 23 10 22 22 Q 17 20 13 18 Z" opacity="0.55"/>
|
||||
<!-- legs -->
|
||||
<path d="M 7 30 L 6 38 L 8 38 L 9 30 Z"/>
|
||||
<path d="M 13 30 L 14 38 L 12 38 L 11 30 Z"/>
|
||||
<path d="M 7 18 Q -2 14 -1 28 Q 4 25 9 23 Z" opacity="0.5"/>
|
||||
<path d="M 19 18 Q 28 14 27 28 Q 22 25 17 23 Z" opacity="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Magical swoosh trail from upper right arcing down -->
|
||||
<path d="M 385 18 C 410 8 418 28 408 48 C 414 40 416 28 405 24 C 400 22 392 22 385 26 Z" fill="#2E8B57" opacity="0.9"/>
|
||||
<path d="M 395 58 C 408 56 414 48 412 40 C 410 46 404 50 395 52 Z" fill="#2E8B57" opacity="0.7"/>
|
||||
|
||||
<!-- Sparkles -->
|
||||
<circle cx="392" cy="8" r="2.2" fill="#2E8B57"/>
|
||||
<circle cx="408" cy="14" r="1.4" fill="#2E8B57"/>
|
||||
<circle cx="378" cy="24" r="1.6" fill="#2E8B57"/>
|
||||
<g fill="#2E8B57">
|
||||
<path d="M 400 72 L 401.2 75 L 404.2 75 L 401.7 77 L 402.8 80 L 400 78.2 L 397.2 80 L 398.3 77 L 395.8 75 L 398.8 75 Z"/>
|
||||
<!-- Sparkles scattered -->
|
||||
<g fill="#3CB371">
|
||||
<circle cx="450" cy="18" r="2.4"/>
|
||||
<circle cx="438" cy="32" r="1.4"/>
|
||||
<circle cx="460" cy="42" r="1.8"/>
|
||||
<circle cx="430" cy="10" r="1.2" opacity="0.7"/>
|
||||
<path d="M 455 62 L 456.5 65.5 L 460 66 L 457.5 68.5 L 458.5 72 L 455 70 L 451.5 72 L 452.5 68.5 L 450 66 L 453.5 65.5 Z" opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.1 KiB |
Reference in New Issue
Block a user