ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): inject QR directly into SVG XML for pixel-perfect placement

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 23:56:37 +03:00
parent 808097377d
commit fa50e73198
5 changed files with 300 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svg ornekleri/qr-1.svg
+88
View File
@@ -0,0 +1,88 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 650" width="400" height="650">
<defs>
<!-- Gold Gradient for luxury accents & borders -->
<linearGradient id="gold-accent" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F3D382" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="100%" stop-color="#AA7C11" />
</linearGradient>
<!-- Card Background Subtle Dark Gradient -->
<linearGradient id="card-surface" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1A1A1E" />
<stop offset="100%" stop-color="#121215" />
</linearGradient>
</defs>
<!-- 1. Backgrounds & Contrast Panels -->
<g id="layer-background">
<!-- Distinct Outer Canvas Background -->
<rect id="bg-canvas" width="400" height="650" fill="#0C0C0E" />
<!-- Main Contrasting Menu Card Panel -->
<rect id="main-card" x="20" y="20" width="360" height="610" rx="24" fill="url(#card-surface)" stroke="url(#gold-accent)" stroke-width="1.5" />
<!-- Inner Decorative Framing Line -->
<rect id="inner-border" x="30" y="30" width="340" height="590" rx="18" fill="none" stroke="#2B2B32" stroke-width="1" stroke-dasharray="5 3" />
</g>
<!-- 2. Decorative Icons, Crests & Accents -->
<g id="layer-icons">
<!-- Header Chef & Cutlery Crest -->
<g transform="translate(170, 52)" stroke="url(#gold-accent)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<!-- Fork -->
<path d="M-20 6 v12 c0 4 3 6 7 6 v14 M-23 6 v8 M-17 6 v8" />
<!-- Chef Hat -->
<path d="M12 36 h36 c3 0 5-2 5-5 v-4 c0-2-1-3-3-4 2-3 2-7 0-10 -1-2-3-3-5-3 0-5-4-9-9-9 -4 0-8 3-9 7 -2-1-5-1-7 1 -3 3-3 7-1 10 -2 1-3 2-3 4 v4 c0 3 2 5 6 5 z" />
<path d="M16 30 h28" stroke-width="1" />
<!-- Knife -->
<path d="M78 6 v38 M78 6 c6 0 10 6 10 14 v8 c0 4-4 6-10 6" />
</g>
<!-- Center Star Divider -->
<g id="divider-accent">
<path d="M130 162 h55 M215 162 h55" stroke="url(#gold-accent)" stroke-width="1" opacity="0.6" />
<polygon points="200,157 202.5,161.5 207,162 203.5,165 204.5,169.5 200,167 195.5,169.5 196.5,165 193,162 197.5,161.5" fill="url(#gold-accent)" />
</g>
<!-- WiFi Icon -->
<g transform="translate(68, 592)" stroke="#A1A1AA" stroke-width="1.5" fill="none" stroke-linecap="round">
<path d="M0 0 a14 14 0 0 1 18 0" />
<path d="M3 4 a9 9 0 0 1 12 0" />
<circle cx="9" cy="8" r="1" fill="#A1A1AA" />
</g>
<!-- Instagram / Social Icon -->
<g transform="translate(225, 592)" stroke="#A1A1AA" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<rect x="0" y="0" width="13" height="13" rx="3.5" />
<circle cx="6.5" cy="6.5" r="3" />
<circle cx="10" cy="3" r="0.5" fill="#A1A1AA" />
</g>
</g>
<!-- 3. Clean Placeholder Box for QR Code -->
<g id="qr-placeholder" transform="translate(90, 215)">
<rect width="220" height="220" rx="20" fill="#FFFFFF" stroke="#E4E4E7" stroke-width="2" />
<rect x="12" y="12" width="196" height="196" rx="14" fill="#FAFAFA" stroke="#E4E4E7" stroke-dasharray="4 3" />
<text x="110" y="115" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#71717A" text-anchor="middle">QR KOD ALANI</text>
</g>
<!-- 4. Native Editable Texts -->
<g id="layer-texts" font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" text-anchor="middle">
<!-- Header Titles -->
<text x="200" y="130" font-size="22" font-weight="800" fill="#FFFFFF" letter-spacing="2">GOURMET BISTRO</text>
<text x="200" y="150" font-size="11" font-weight="500" fill="#D4AF37" letter-spacing="2.5">TEMASSIZ DİJİTAL MENÜ</text>
<!-- Scan Call to Action -->
<text x="200" y="475" font-size="13" font-weight="700" fill="#FFFFFF" letter-spacing="1.2">MENÜYÜ GÖRMEK İÇİN OKUTUN</text>
<text x="200" y="495" font-size="11" font-weight="400" fill="#8E8E93">Kameranız ile QR kodu taratın</text>
<!-- Table Badge Container & Label -->
<rect x="140" y="520" width="120" height="28" rx="14" fill="#242429" stroke="#383840" stroke-width="1" />
<text x="200" y="539" font-size="12" font-weight="600" fill="#E4E4E7" letter-spacing="0.5">Masa No: 01</text>
<!-- Footer Network & Social Meta -->
<text x="128" y="602" font-size="10" font-weight="400" fill="#A1A1AA" text-anchor="start">Bistro_Guest</text>
<text x="246" y="602" font-size="10" font-weight="400" fill="#A1A1AA" text-anchor="start">@gourmetbistro</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

svg ornekleri/qr-4.svg
+71
View File
@@ -0,0 +1,71 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 650" width="400" height="650">
<defs>
<!-- Define a linear gradient for gold effect -->
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37"/>
<stop offset="100%" stop-color="#FFD700"/>
</linearGradient>
</defs>
<!-- Background Canvas -->
<rect id="bg-canvas" fill="#451A03" width="400" height="650"/>
<!-- Main Menu Card Panel -->
<rect id="main-card" x="20" y="20" width="360" height="610" rx="24" fill="#000000" stroke="url(#goldGradient)" stroke-width="2"/>
<!-- Layer for Icons/Graphics -->
<g id="layer-icons">
<!-- Top decorative line -->
<line x1="80" y1="165" x2="320" y2="165" stroke="url(#goldGradient)" stroke-width="1" fill="#D97706"/>
<!-- Bottom decorative line -->
<line x1="80" y1="535" x2="320" y2="535" stroke="url(#goldGradient)" stroke-width="1" fill="#B45309"/>
<!-- Subtle corner accents (L-shapes) -->
<path d="M40 40 L40 70 M40 40 L70 40" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#D97706"/>
<path d="M360 40 L360 70 M360 40 L330 40" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#B45309"/>
<path d="M40 610 L40 580 M40 610 L70 610" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#D97706"/>
<path d="M360 610 L360 580 M360 610 L330 610" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#B45309"/>
<!-- Minimalist Fork and Knife Line Art -->
<g transform="translate(0, 15)">
<!-- Fork -->
<path d="M185 550 L185 560 M188 550 L188 560 M191 550 L191 560 M188 560 L188 565" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#D97706"/>
<!-- Knife -->
<path d="M205 550 L205 560 L208 560 L208 552 C208 550 206.5 549 205 549 Z M206.5 560 L206.5 565" stroke="url(#goldGradient)" stroke-width="1.5" stroke-linecap="round" fill="#B45309"/>
</g>
</g>
<!-- QR Placeholder -->
<g id="qr-placeholder" transform="translate(90, 215)">
<rect width="220" height="220" rx="20" fill="#FFFFFF" stroke="#E4E4E7" stroke-width="2"/>
<rect x="12" y="12" width="196" height="196" rx="14" fill="#FAFAFA" stroke="#E4E4E7" stroke-dasharray="4 3"/>
<text x="110" y="115" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#71717A" text-anchor="middle">
QR KOD ALANI
</text>
</g>
<!-- Layer for Texts -->
<g id="layer-texts" fill="#c10101">
<!-- Table Info badge -->
<rect x="140" y="40" width="120" height="30" rx="15" fill="url(#goldGradient)"/>
<text x="200" y="60" font-family="Inter, sans-serif" font-size="14" font-weight="600" fill="#1A1A1D" text-anchor="middle">
MASA NO: 01
</text>
<!-- Restaurant Name -->
<text x="200" y="120" font-family="Inter, sans-serif" font-size="26" font-weight="700" fill="url(#goldGradient)" text-anchor="middle">
Gourmet Bistro
</text>
<!-- Tagline / Subtitle -->
<text x="200" y="145" font-family="Inter, sans-serif" font-size="12" font-weight="400" fill="#E4E4E7" text-anchor="middle">
Temassız Dijital Menü
</text>
<!-- "MENÜYÜ GÖRMEK İÇİN OKUTUN" -->
<text x="200" y="480" font-family="Inter, sans-serif" font-size="16" font-weight="700" fill="url(#goldGradient)" text-anchor="middle">
MENÜYÜ GÖRMEK İÇİN OKUTUN
</text>
<!-- Instruction note -->
<text x="200" y="505" font-family="Inter, sans-serif" font-size="11" font-weight="400" fill="#A1A1AA" text-anchor="middle">
Kameranızı QR Koda Odaklayın
</text>
<!-- WiFi & Social Media footer info -->
<text x="200" y="595" font-family="Inter, sans-serif" font-size="11" font-weight="400" fill="#A1A1AA" text-anchor="middle">
Ücretsiz Wi-Fi: GourmetBistro_Guest
</text>
<text x="200" y="610" font-family="Inter, sans-serif" font-size="11" font-weight="400" fill="#A1A1AA" text-anchor="middle">
Bizi Takip Edin: @GourmetBistro
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

svg ornekleri/qr-5.svg
+285
View File
@@ -0,0 +1,285 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 650"
width="400"
height="650"
>
<g id="layer-background">
<rect
id="bg-canvas"
x="0"
y="0"
width="400"
height="650"
fill="#0B0E14"
/>
</g>
<g id="layer-card">
<!-- Ana Lüks Kart Arka Planı (Gece Yarısı Laciverti & Kömür) -->
<rect
id="main-card"
x="20"
y="20"
width="360"
height="610"
rx="24"
fill="#121721"
stroke="#D4AF37"
stroke-width="1.5"
/>
<!-- İç Çift Altın Bordür Hattı -->
<rect
id="inner-border"
x="28"
y="28"
width="344"
height="594"
rx="18"
fill="none"
stroke="#C5A059"
stroke-width="0.8"
stroke-opacity="0.4"
/>
<rect
x="32"
y="32"
width="336"
height="586"
rx="14"
fill="none"
stroke="#C5A059"
stroke-width="0.5"
stroke-opacity="0.2"
/>
</g>
<g id="layer-icons">
<!-- Üst Köşe Geometrik Art-Deco Motifleri -->
<path
d="M 38 48 L 48 38 M 38 38 L 52 38 M 38 38 L 38 52"
stroke="#D4AF37"
stroke-width="1"
stroke-linecap="round"
stroke-opacity="0.6"
fill="none"
/>
<path
d="M 362 48 L 352 38 M 362 38 L 348 38 M 362 38 L 362 52"
stroke="#D4AF37"
stroke-width="1"
stroke-linecap="round"
stroke-opacity="0.6"
fill="none"
/>
<!-- Üst Masa Numarası Kapsülü -->
<rect
x="148"
y="44"
width="104"
height="22"
rx="11"
fill="#1A2230"
stroke="#D4AF37"
stroke-width="0.8"
/>
<circle cx="158" cy="55" r="1.5" fill="#D4AF37" />
<circle cx="242" cy="55" r="1.5" fill="#D4AF37" />
<!-- Merkezi Gastronomi & Yıldız Amblemi -->
<g transform="translate(200, 84)">
<circle cx="0" cy="0" r="11" fill="none" stroke="#D4AF37" stroke-width="0.8" stroke-dasharray="2 2" />
<polygon points="0,-7 2,-2 7,0 2,2 0,7 -2,2 -7,0 -2,-2" fill="#D4AF37" />
</g>
<!-- Zarif Tipografik Ayırıcı -->
<line x1="75" y1="172" x2="175" y2="172" stroke="#D4AF37" stroke-width="0.75" stroke-opacity="0.5" />
<polygon points="200,169.5 202.5,172 200,174.5 197.5,172" fill="#D4AF37" />
<line x1="225" y1="172" x2="325" y2="172" stroke="#D4AF37" stroke-width="0.75" stroke-opacity="0.5" />
<!-- QR Alanı Hedef Odak Çerçeveleri -->
<path d="M 80 205 L 80 195 L 90 195" fill="none" stroke="#D4AF37" stroke-width="2" stroke-linecap="round" />
<path d="M 320 205 L 320 195 L 310 195" fill="none" stroke="#D4AF37" stroke-width="2" stroke-linecap="round" />
<path d="M 80 445 L 80 455 L 90 455" fill="none" stroke="#D4AF37" stroke-width="2" stroke-linecap="round" />
<path d="M 320 445 L 320 455 L 310 455" fill="none" stroke="#D4AF37" stroke-width="2" stroke-linecap="round" />
<!-- Alt Bilgi Kartı Paneli -->
<rect
x="36"
y="520"
width="328"
height="84"
rx="14"
fill="#171F2C"
stroke="#D4AF37"
stroke-width="0.8"
stroke-opacity="0.4"
/>
<line x1="200" y1="530" x2="200" y2="594" stroke="#D4AF37" stroke-width="0.5" stroke-opacity="0.25" />
<!-- Minimal WiFi Vektörü -->
<g transform="translate(62, 545)">
<path d="M 0 4 A 12 12 0 0 1 18 4" fill="none" stroke="#D4AF37" stroke-width="1.4" stroke-linecap="round" />
<path d="M 3.5 8 A 7 7 0 0 1 14.5 8" fill="none" stroke="#D4AF37" stroke-width="1.4" stroke-linecap="round" />
<circle cx="9" cy="12" r="1.2" fill="#D4AF37" />
</g>
<!-- Minimal Instagram / Web Vektörü -->
<g transform="translate(224, 545)">
<rect x="0" y="0" width="15" height="15" rx="4" fill="none" stroke="#D4AF37" stroke-width="1.4" />
<circle cx="7.5" cy="7.5" r="3.2" fill="none" stroke="#D4AF37" stroke-width="1.1" />
<circle cx="11.5" cy="3.5" r="0.75" fill="#D4AF37" />
</g>
</g>
<g id="qr-placeholder" transform="translate(90, 215)">
<rect
width="220"
height="220"
rx="20"
fill="#FFFFFF"
stroke="#E4E4E7"
stroke-width="2"
/>
<rect
x="12"
y="12"
width="196"
height="196"
rx="14"
fill="#FAFAFA"
stroke="#E4E4E7"
stroke-dasharray="4 3"
/>
<text
x="110"
y="115"
font-family="Inter, Arial, sans-serif"
font-size="12"
font-weight="600"
fill="#71717A"
text-anchor="middle"
>QR KOD ALANI</text>
</g>
<g id="layer-texts">
<!-- Masa Numarası -->
<text
x="200"
y="59"
font-family="Inter, Arial, sans-serif"
font-size="9"
font-weight="700"
letter-spacing="2.5"
fill="#E5C378"
text-anchor="middle"
>TABLE • 01</text>
<!-- Restoran Logosu & İsmi -->
<text
x="200"
y="126"
font-family="'Playfair Display', 'Cinzel', Georgia, serif"
font-size="28"
font-weight="700"
letter-spacing="1.5"
fill="#F9F6F0"
text-anchor="middle"
>L’ATELIER BISTRO</text>
<!-- Fransızca / Uluslararası Alt Başlık -->
<text
x="200"
y="152"
font-family="Inter, Arial, sans-serif"
font-size="8.5"
font-weight="600"
letter-spacing="4"
fill="#D4AF37"
text-anchor="middle"
>FINE DINING &amp; COCKTAILS</text>
<!-- Çağrı Metni / Talimat -->
<text
x="200"
y="480"
font-family="Inter, Arial, sans-serif"
font-size="11.5"
font-weight="700"
letter-spacing="2"
fill="#F9F6F0"
text-anchor="middle"
>DİJİTAL MENÜ İÇİN OKUTUN</text>
<text
x="200"
y="498"
font-family="'Playfair Display', Georgia, serif"
font-size="10.5"
font-style="italic"
font-weight="400"
letter-spacing="0.5"
fill="#94A3B8"
text-anchor="middle"
>Kameranızı QR koda yaklaştırınız</text>
<!-- Sol Sütun: Yüksek Hızlı WiFi Bilgileri -->
<text
x="126"
y="550"
font-family="Inter, Arial, sans-serif"
font-size="9"
font-weight="700"
letter-spacing="1.2"
fill="#E5C378"
text-anchor="middle"
>GUEST WIFI</text>
<text
x="126"
y="567"
font-family="Inter, Arial, sans-serif"
font-size="8.5"
font-weight="500"
fill="#CBD5E1"
text-anchor="middle"
>Ağ: Atelier-Guest</text>
<text
x="126"
y="582"
font-family="Inter, Arial, sans-serif"
font-size="8.5"
font-weight="500"
fill="#CBD5E1"
text-anchor="middle"
>Şifre: bistro2026</text>
<!-- Sağ Sütun: Sosyal Medya & Rezervasyon -->
<text
x="286"
y="550"
font-family="Inter, Arial, sans-serif"
font-size="8.5"
font-weight="700"
letter-spacing="1.2"
fill="#E5C378"
text-anchor="middle"
>SOSYAL MEDYA</text>
<text
x="286"
y="575"
font-family="Inter, Arial, sans-serif"
font-size="10.5"
font-weight="600"
letter-spacing="0.5"
fill="#F9F6F0"
text-anchor="middle"
>@latelier.bistro</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

svg ornekleri/qr-6.svg
+275
View File
@@ -0,0 +1,275 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 650"
width="400"
height="650"
>
<g id="layer-background">
<!-- Koyu Doku / Kontrast Arka Plan -->
<rect
id="bg-canvas"
x="0"
y="0"
width="400"
height="650"
fill="#252C36"
/>
</g>
<g id="layer-card">
<!-- Sıcak Parşömen / Vintage Krem Ana Kart -->
<rect
id="main-card"
x="20"
y="20"
width="360"
height="610"
rx="20"
fill="#F6EFE2"
stroke="#3A2312"
stroke-width="1.5"
/>
<!-- Çift İnce Vintage Çerçeve -->
<rect
x="28"
y="28"
width="344"
height="594"
rx="14"
fill="none"
stroke="#8C6239"
stroke-width="1"
stroke-opacity="0.4"
/>
<rect
x="32"
y="32"
width="336"
height="586"
rx="10"
fill="none"
stroke="#8C6239"
stroke-width="0.5"
stroke-opacity="0.25"
/>
</g>
<g id="layer-icons">
<!-- Sol Üst: Botanik Kahve / Çay Dalı -->
<g transform="translate(36, 36) scale(0.75)" stroke="#3A2312" stroke-width="1.4" fill="none" stroke-linecap="round">
<path d="M 0 0 C 15 15 25 35 30 65" />
<path d="M 10 12 C 5 2 20 -2 22 8 C 22 18 10 12 10 12 Z" fill="#EADCC7" />
<path d="M 18 27 C 12 20 28 14 32 23 C 32 32 18 27 18 27 Z" fill="#EADCC7" />
<path d="M 24 45 C 32 38 45 48 38 56 C 30 62 24 45 24 45 Z" fill="#EADCC7" />
</g>
<!-- Sağ Üst: Kuşbakışı Latte Art Fincanı -->
<g transform="translate(340, 52)">
<!-- Tabak -->
<circle cx="0" cy="0" r="32" fill="#EADCC7" stroke="#3A2312" stroke-width="1.2" />
<circle cx="0" cy="0" r="26" fill="#F6EFE2" stroke="#8C6239" stroke-width="0.8" stroke-dasharray="2 2" />
<!-- Fincan Kenarı & Kahve -->
<circle cx="0" cy="0" r="21" fill="#7A4B26" stroke="#3A2312" stroke-width="1.4" />
<!-- Latte Art / Rosetta Yaprakları -->
<path d="M 0 10 C -8 4 -4 -6 0 -12 C 4 -6 8 4 0 10 Z" fill="#F6EFE2" />
<path d="M 0 4 C -5 0 -2 -5 0 -8 C 2 -5 5 0 0 4 Z" fill="#7A4B26" />
<circle cx="0" cy="-14" r="1.8" fill="#F6EFE2" />
</g>
<!-- Sol Orta: Küçük Kahve Fincanı & Tabağı -->
<g transform="translate(48, 250)">
<ellipse cx="0" cy="0" rx="26" ry="26" fill="#EADCC7" stroke="#3A2312" stroke-width="1" />
<circle cx="0" cy="0" r="17" fill="#6A3B18" stroke="#3A2312" stroke-width="1.2" />
<!-- Basit Kalp Latte Deseni -->
<path d="M -5 -3 C -8 -7 0 -10 0 -4 C 0 -10 8 -7 5 -3 C 2 3 0 7 0 7 C 0 7 -2 3 -5 -3 Z" fill="#F6EFE2" />
<!-- Fincan Kulpu -->
<path d="M 17 -4 C 23 -4 23 4 17 4" fill="none" stroke="#3A2312" stroke-width="1.5" />
</g>
<!-- Sağ Orta: Dikey Yaprak İllüstrasyonu -->
<g transform="translate(345, 230) scale(0.7)" stroke="#3A2312" stroke-width="1.3" fill="none">
<path d="M 10 0 C 0 30 -5 70 5 110" />
<path d="M 6 25 C 18 15 28 28 14 36 C 6 36 6 25 6 25 Z" fill="#EADCC7" />
<path d="M 2 60 C -12 48 -20 62 -8 70 C 2 70 2 60 2 60 Z" fill="#EADCC7" />
<path d="M 5 88 C 18 78 24 92 12 100 C 5 100 5 88 5 88 Z" fill="#EADCC7" />
</g>
<!-- Üst Başlık Yan Süsleme Çizgileri -->
<path d="M 142 66 C 148 64 154 68 160 66" fill="none" stroke="#8C6239" stroke-width="1.2" stroke-linecap="round" />
<path d="M 240 66 C 246 68 252 64 258 66" fill="none" stroke="#8C6239" stroke-width="1.2" stroke-linecap="round" />
<!-- Sol Alt: Çekirdek ve Yaprak Grubu -->
<g transform="translate(42, 530) scale(0.65)" stroke="#3A2312" stroke-width="1.4" fill="none">
<path d="M 0 110 C 20 70 15 30 0 0" />
<path d="M 8 30 C 24 15 35 30 18 42 Z" fill="#EADCC7" />
<path d="M 12 70 C 30 55 40 72 20 84 Z" fill="#EADCC7" />
</g>
<!-- Kahve Çekirdekleri Motifleri -->
<!-- Sol Alt Çekirdek 1 -->
<g transform="translate(108, 595) rotate(-20) scale(0.8)">
<ellipse cx="0" cy="0" rx="9" ry="6.5" fill="#CBB296" stroke="#3A2312" stroke-width="1.2" />
<path d="M -7 0 Q 0 3 0 0 Q 0 -3 7 0" fill="none" stroke="#3A2312" stroke-width="1.2" />
</g>
<!-- Sol Alt Çekirdek 2 -->
<g transform="translate(128, 584) rotate(35) scale(0.8)">
<ellipse cx="0" cy="0" rx="9" ry="6.5" fill="#CBB296" stroke="#3A2312" stroke-width="1.2" />
<path d="M -7 0 Q 0 3 0 0 Q 0 -3 7 0" fill="none" stroke="#3A2312" stroke-width="1.2" />
</g>
<!-- Sağ Orta Çekirdek -->
<g transform="translate(336, 360) rotate(-45) scale(0.7)">
<ellipse cx="0" cy="0" rx="9" ry="6.5" fill="#CBB296" stroke="#3A2312" stroke-width="1.2" />
<path d="M -7 0 Q 0 3 0 0 Q 0 -3 7 0" fill="none" stroke="#3A2312" stroke-width="1.2" />
</g>
<!-- Sağ Alt: Sıcak Kahve Fincanı İllüstrasyonu -->
<g transform="translate(325, 590)">
<!-- Tabak -->
<ellipse cx="0" cy="18" rx="28" ry="7" fill="#EADCC7" stroke="#3A2312" stroke-width="1.2" />
<!-- Fincan Gövdesi -->
<path d="M -18 2 C -18 16 18 16 18 2 Z" fill="#F6EFE2" stroke="#3A2312" stroke-width="1.4" />
<ellipse cx="0" cy="2" rx="18" ry="4" fill="#6A3B18" stroke="#3A2312" stroke-width="1.2" />
<!-- Kulp -->
<path d="M 16 4 C 24 4 24 12 16 14" fill="none" stroke="#3A2312" stroke-width="1.3" />
<!-- Buhar Çizgileri -->
<path d="M -6 -4 C -8 -9 -4 -12 -6 -17" fill="none" stroke="#8C6239" stroke-width="1" stroke-linecap="round" />
<path d="M 2 -5 C 0 -10 4 -13 2 -19" fill="none" stroke="#8C6239" stroke-width="1" stroke-linecap="round" />
</g>
<!-- QR Alanı İnce Köşe Süsleri -->
<path d="M 80 205 C 80 195 80 195 90 195" fill="none" stroke="#3A2312" stroke-width="2" stroke-linecap="round" />
<path d="M 320 205 C 320 195 320 195 310 195" fill="none" stroke="#3A2312" stroke-width="2" stroke-linecap="round" />
<path d="M 80 445 C 80 455 80 455 90 455" fill="none" stroke="#3A2312" stroke-width="2" stroke-linecap="round" />
<path d="M 320 445 C 320 455 320 455 310 455" fill="none" stroke="#3A2312" stroke-width="2" stroke-linecap="round" />
<!-- Alt Est. Bölümü Çizgileri -->
<line x1="145" y1="608" x2="175" y2="608" stroke="#8C6239" stroke-width="0.8" />
<line x1="225" y1="608" x2="255" y2="608" stroke="#8C6239" stroke-width="0.8" />
</g>
<g id="qr-placeholder" transform="translate(90, 215)">
<!-- QR Kod Arka Planı (Hafif Sıcak Ton) -->
<rect
width="220"
height="220"
rx="20"
fill="#FBF8F2"
stroke="#D8C7B0"
stroke-width="1.5"
/>
<rect
x="10"
y="10"
width="200"
height="200"
rx="14"
fill="#F5EFE6"
stroke="#D8C7B0"
stroke-dasharray="4 3"
/>
<!-- QR Merkezine Kahve Çekirdeği İkonu Rozeti -->
<circle cx="110" cy="98" r="18" fill="#FBF8F2" stroke="#8C6239" stroke-width="1" />
<g transform="translate(110, 98) scale(0.65)">
<ellipse cx="-5" cy="2" rx="7" ry="5" fill="#3A2312" transform="rotate(-30)" />
<ellipse cx="5" cy="0" rx="7" ry="5" fill="#3A2312" transform="rotate(40)" />
</g>
<text
x="110"
y="132"
font-family="Inter, Arial, sans-serif"
font-size="11"
font-weight="700"
letter-spacing="1"
fill="#8C6239"
text-anchor="middle"
>QR KOD ALANI</text>
</g>
<g id="layer-texts">
<!-- Üst Başlık Takısı -->
<text
x="200"
y="70"
font-family="'Playfair Display', Georgia, serif"
font-size="14"
font-style="italic"
font-weight="700"
letter-spacing="4"
fill="#3A2312"
text-anchor="middle"
>THE</text>
<!-- Ana Tipografi: El Yazısı / Retro Tabela Havası -->
<text
x="200"
y="114"
font-family="'Playfair Display', 'Brush Script MT', 'Great Vibes', Georgia, cursive, serif"
font-size="34"
font-weight="800"
letter-spacing="0.5"
fill="#2C1A0E"
text-anchor="middle"
>The Daily Grind</text>
<!-- Alt Kategori Başlığı -->
<text
x="200"
y="146"
font-family="Inter, Arial, sans-serif"
font-size="13"
font-weight="800"
letter-spacing="3"
fill="#3A2312"
text-anchor="middle"
>COFFEE &amp; KITCHEN</text>
<!-- Büyük ve Belirgin Çağrı Metni -->
<text
x="200"
y="488"
font-family="Inter, Arial, sans-serif"
font-size="19"
font-weight="900"
letter-spacing="1.5"
fill="#2C1A0E"
text-anchor="middle"
>SCAN TO VIEW MENU</text>
<!-- Restoran & WiFi Bilgi Bandı -->
<text
x="200"
y="520"
font-family="Inter, Arial, sans-serif"
font-size="10.5"
font-weight="700"
letter-spacing="0.5"
fill="#3A2312"
text-anchor="middle"
>DAILY GRIND CAFE | WIFI: DAILY_GRIND_GUEST</text>
<!-- Şifre ve Masa Detayı -->
<text
x="200"
y="542"
font-family="Inter, Arial, sans-serif"
font-size="9"
font-weight="600"
letter-spacing="1"
fill="#8C6239"
text-anchor="middle"
>ŞİFRE: coffee2026 • MASA NO: 04</text>
<!-- Kuruluş / Est. Yılı -->
<text
x="200"
y="611"
font-family="'Playfair Display', Georgia, serif"
font-size="11"
font-style="italic"
font-weight="700"
letter-spacing="2"
fill="#3A2312"
text-anchor="middle"
>EST. 2018</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB