417 lines
14 KiB
TypeScript
417 lines
14 KiB
TypeScript
import * as React from "react"
|
|
import Svg, {
|
|
SvgProps,
|
|
Defs,
|
|
LinearGradient,
|
|
Stop,
|
|
Pattern,
|
|
Path,
|
|
G,
|
|
Rect,
|
|
Ellipse,
|
|
Circle,
|
|
Text,
|
|
TSpan,
|
|
} from "react-native-svg"
|
|
/* SVGR has dropped some elements not supported by react-native-svg: style */
|
|
const SvgComponent = (props: SvgProps) => (
|
|
<Svg width={400} height={650} {...props}>
|
|
<Defs>
|
|
<LinearGradient id="card-grad" x1="0%" x2="0%" y1="0%" y2="100%">
|
|
<Stop offset="0%" stopColor="#fdfbf5" />
|
|
<Stop offset="50%" stopColor="#faf4e6" />
|
|
<Stop offset="100%" stopColor="#f7eed8" />
|
|
</LinearGradient>
|
|
<LinearGradient id="oven-fire" x1="0%" x2="0%" y1="100%" y2="0%">
|
|
<Stop offset="0%" stopColor="#c0392b" />
|
|
<Stop offset="50%" stopColor="#e67e22" />
|
|
<Stop offset="100%" stopColor="#f1c40f" />
|
|
</LinearGradient>
|
|
<LinearGradient id="wine-grad" x1="0%" x2="0%" y1="0%" y2="100%">
|
|
<Stop offset="0%" stopColor="#7b1123" />
|
|
<Stop offset="100%" stopColor="#4a0512" />
|
|
</LinearGradient>
|
|
<Pattern
|
|
id="checkered-border"
|
|
width={20}
|
|
height={20}
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<Path fill="#b92b27" d="M0 0h20v20H0z" />
|
|
<Path fill="#fdf8ee" d="M0 0h10v10H0zm10 10h10v10H10z" />
|
|
</Pattern>
|
|
</Defs>
|
|
<Path
|
|
id="layer-background"
|
|
fill="url(#checkered-border)"
|
|
d="M0 0h400v650H0z"
|
|
/>
|
|
<G id="layer-card">
|
|
<Rect
|
|
width={356}
|
|
height={606}
|
|
x={22}
|
|
y={22}
|
|
fill="url(#card-grad)"
|
|
stroke="#b92b27"
|
|
strokeWidth={2}
|
|
rx={20}
|
|
/>
|
|
<Rect
|
|
width={344}
|
|
height={594}
|
|
x={28}
|
|
y={28}
|
|
fill="none"
|
|
stroke="#8c6239"
|
|
strokeOpacity={0.5}
|
|
strokeWidth={0.8}
|
|
rx={15}
|
|
/>
|
|
<Rect
|
|
width={140}
|
|
height={24}
|
|
x={130}
|
|
y={34}
|
|
fill="#faf4e6"
|
|
stroke="#8c6239"
|
|
strokeWidth={1.2}
|
|
rx={12}
|
|
/>
|
|
</G>
|
|
<G id="layer-icons">
|
|
<Path
|
|
fill="none"
|
|
stroke="#c5a880"
|
|
strokeLinecap="round"
|
|
strokeWidth={1.5}
|
|
d="M68 88q12-13 28-2 6 5 10 2m226 0q-12-13-28-2-6 5-10 2"
|
|
/>
|
|
<G id="pizza-oven" transform="translate(200 192)">
|
|
<Rect
|
|
width={88}
|
|
height={6}
|
|
x={-44}
|
|
fill="#d7ccc8"
|
|
stroke="#5d4037"
|
|
rx={2}
|
|
/>
|
|
<Path
|
|
fill="#d7ccc8"
|
|
stroke="#5d4037"
|
|
strokeWidth={1.5}
|
|
d="M-40 0a40 38 0 0 1 80 0Z"
|
|
/>
|
|
<Path
|
|
stroke="#8d6e63"
|
|
d="m-30-25 7 6m6-15 4 8M0-38v9m17-5-4 8m17 1-7 6"
|
|
/>
|
|
<Path fill="#3e2723" stroke="#271c19" d="M-28 0a28 26 0 0 1 56 0Z" />
|
|
<Path
|
|
fill="url(#oven-fire)"
|
|
d="M-18 0q3-16 12-10 6-12 12-2 9-6 12 12Z"
|
|
/>
|
|
<Path fill="#fff9c4" d="M-10 0q5-10 10-6 5-6 10 6Z" />
|
|
</G>
|
|
<G id="left-ingredients" transform="translate(108 185)">
|
|
<Ellipse
|
|
cx={-16}
|
|
cy={6}
|
|
fill="#d32f2f"
|
|
stroke="#8e0000"
|
|
strokeWidth={0.8}
|
|
rx={14}
|
|
ry={10}
|
|
transform="rotate(-25 -16 6)"
|
|
/>
|
|
<Ellipse
|
|
cx={-16}
|
|
cy={6}
|
|
fill="#e53935"
|
|
rx={10}
|
|
ry={6.5}
|
|
transform="rotate(-25 -16 6)"
|
|
/>
|
|
<Ellipse
|
|
cx={2}
|
|
cy={7}
|
|
fill="#c62828"
|
|
stroke="#8e0000"
|
|
strokeWidth={0.8}
|
|
rx={13}
|
|
ry={9}
|
|
transform="rotate(-10 2 7)"
|
|
/>
|
|
<Ellipse
|
|
cx={2}
|
|
cy={7}
|
|
fill="#e53935"
|
|
rx={9}
|
|
ry={5.5}
|
|
transform="rotate(-10 2 7)"
|
|
/>
|
|
<Circle cx={2} cy={7} r={1.5} fill="#fdd835" />
|
|
<Circle
|
|
cx={16}
|
|
cy={-2}
|
|
r={14}
|
|
fill="#e53935"
|
|
stroke="#b71c1c"
|
|
strokeWidth={0.8}
|
|
/>
|
|
<Ellipse cx={12} cy={-6} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
|
|
<Path
|
|
stroke="#2e7d32"
|
|
strokeLinecap="round"
|
|
strokeWidth={1.5}
|
|
d="M16-16v3m0 0-5 2m5-2 5 2m-5-2-3-2m3 2 3-2"
|
|
/>
|
|
</G>
|
|
<G id="right-ingredients" transform="translate(290 182)">
|
|
<Circle
|
|
cx={-14}
|
|
cy={2}
|
|
r={15}
|
|
fill="#e53935"
|
|
stroke="#b71c1c"
|
|
strokeWidth={0.8}
|
|
/>
|
|
<Ellipse cx={-18} cy={-3} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
|
|
<Path
|
|
stroke="#2e7d32"
|
|
strokeLinecap="round"
|
|
strokeWidth={1.5}
|
|
d="M-14-13v3m0 0-4 2m4-2 4 2"
|
|
/>
|
|
<Path
|
|
fill="#2e7d32"
|
|
stroke="#1b5e20"
|
|
strokeWidth={0.8}
|
|
d="M-2 0C8-16 26-12 24 2 22 14 6 10-2 0Z"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#4caf50"
|
|
strokeWidth={0.7}
|
|
d="M-2 0q14-4 26 2"
|
|
/>
|
|
<Path
|
|
fill="#388e3c"
|
|
stroke="#1b5e20"
|
|
strokeWidth={0.8}
|
|
d="M8 6c10-6 24 4 18 16-8 6-18-4-18-16Z"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#81c784"
|
|
strokeWidth={0.7}
|
|
d="M8 6q12 6 18 16"
|
|
/>
|
|
</G>
|
|
<G id="footer-pizza-slice" transform="rotate(-10 3278.565 44.969)">
|
|
<Path
|
|
fill="#deac68"
|
|
stroke="#8d6e63"
|
|
strokeWidth={1.2}
|
|
d="m0 0 46-18c4 8 6 32 0 40Z"
|
|
/>
|
|
<Path fill="#fbc02d" d="m2 0 40-15c3 7 5 25 0 33Z" />
|
|
<Circle
|
|
cx={28}
|
|
cy={-5}
|
|
r={5}
|
|
fill="#c62828"
|
|
stroke="#8e0000"
|
|
strokeWidth={0.8}
|
|
/>
|
|
<Circle
|
|
cx={32}
|
|
cy={8}
|
|
r={4.5}
|
|
fill="#c62828"
|
|
stroke="#8e0000"
|
|
strokeWidth={0.8}
|
|
/>
|
|
<Circle
|
|
cx={16}
|
|
r={3.5}
|
|
fill="#c62828"
|
|
stroke="#8e0000"
|
|
strokeWidth={0.8}
|
|
/>
|
|
<Ellipse
|
|
cx={23}
|
|
cy={4}
|
|
fill="#2e7d32"
|
|
rx={2}
|
|
ry={4}
|
|
transform="rotate(30 23 4)"
|
|
/>
|
|
<Ellipse
|
|
cx={34}
|
|
cy={-11}
|
|
fill="#2e7d32"
|
|
rx={2}
|
|
ry={3}
|
|
transform="rotate(-40 34 -11)"
|
|
/>
|
|
</G>
|
|
<G id="footer-wine-glass" transform="translate(345 562)">
|
|
<Path
|
|
fill="none"
|
|
stroke="#71717a"
|
|
strokeWidth={1.2}
|
|
d="M-14-24C-15-8-11 4 0 6 11 4 15-8 14-24Z"
|
|
/>
|
|
<Path
|
|
fill="url(#wine-grad)"
|
|
d="M-13-12C-11 0-7 4 0 5.5 7 4 11 0 13-12Z"
|
|
/>
|
|
<Ellipse cy={-12} fill="#991b1b" rx={13} ry={2} />
|
|
<Path stroke="#71717a" strokeWidth={1.4} d="M0 6v22" />
|
|
<Ellipse
|
|
cy={28}
|
|
fill="#e4e4e7"
|
|
stroke="#71717a"
|
|
strokeWidth={1.2}
|
|
rx={11}
|
|
ry={2}
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#fff"
|
|
strokeLinecap="round"
|
|
d="M-10-20c-2 8 1 18 6 23"
|
|
opacity={0.6}
|
|
/>
|
|
</G>
|
|
<G id="qr-corner-accents">
|
|
<Path
|
|
fill="none"
|
|
stroke="#2e7d32"
|
|
strokeLinecap="round"
|
|
strokeWidth={3}
|
|
d="M78 227v-22h22"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#b92b27"
|
|
strokeLinecap="round"
|
|
strokeWidth={3}
|
|
d="M322 227v-22h-22M78 423v22h22"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#2e7d32"
|
|
strokeLinecap="round"
|
|
strokeWidth={3}
|
|
d="M322 423v22h-22"
|
|
/>
|
|
</G>
|
|
</G>
|
|
<G id="qr-placeholder" transform="translate(90 215)">
|
|
<Rect
|
|
width={220}
|
|
height={220}
|
|
fill="#fff"
|
|
stroke="#e4e4e7"
|
|
strokeWidth={2}
|
|
rx={20}
|
|
/>
|
|
<Rect
|
|
width={196}
|
|
height={196}
|
|
x={12}
|
|
y={12}
|
|
fill="#fafafa"
|
|
stroke="#e4e4e7"
|
|
strokeDasharray="4 3"
|
|
rx={14}
|
|
/>
|
|
<Text
|
|
x={110}
|
|
y={115}
|
|
fill="#71717a"
|
|
dominantBaseline="middle"
|
|
fontFamily='"Inter",Arial,sans-serif'
|
|
fontSize={12}
|
|
fontWeight={700}
|
|
letterSpacing={0.5}
|
|
textAnchor="middle"
|
|
>
|
|
{"QR KOD ALANI"}
|
|
</Text>
|
|
</G>
|
|
<G id="layer-texts">
|
|
<Text
|
|
x={200}
|
|
y={50}
|
|
fill="#18181b"
|
|
fontFamily='"Inter",Arial,sans-serif'
|
|
fontSize={11}
|
|
fontWeight={800}
|
|
letterSpacing={1.2}
|
|
textAnchor="middle"
|
|
>
|
|
{"MASA NO: 01"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={96}
|
|
className="font-brand-arc"
|
|
fontSize={24}
|
|
textAnchor="middle"
|
|
>
|
|
{"PIZZERIA"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={132}
|
|
className="font-brand-arc"
|
|
fontSize={31}
|
|
letterSpacing={1}
|
|
textAnchor="middle"
|
|
>
|
|
{"BELLA NAPOLI"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={222}
|
|
fill="#2e7d32"
|
|
fontFamily='"Inter",Arial,sans-serif'
|
|
fontSize={11.5}
|
|
fontWeight={800}
|
|
letterSpacing={1.8}
|
|
textAnchor="middle"
|
|
>
|
|
{"AUTENTICA CUCINA ITALIANA"}
|
|
</Text>
|
|
<Text x={200} y={474} className="font-cta" textAnchor="middle">
|
|
{"MEN\xDCY\xDC G\xD6RMEK"}
|
|
</Text>
|
|
<Text x={200} y={494} className="font-cta" textAnchor="middle">
|
|
{"\u0130\xC7\u0130N OKUTUN"}
|
|
</Text>
|
|
<Text x={200} y={546} textAnchor="middle">
|
|
<TSpan className="font-footer-bold">{"WiFi: "}</TSpan>
|
|
<TSpan className="font-footer-reg">{"GourmetBistro"}</TSpan>
|
|
<TSpan fill="#a1a1aa" className="font-footer-reg">
|
|
{" | "}
|
|
</TSpan>
|
|
<TSpan className="font-footer-bold">{"\u015Eifre: "}</TSpan>
|
|
<TSpan className="font-footer-reg">{"lezzetli01"}</TSpan>
|
|
</Text>
|
|
<Text x={200} y={570} textAnchor="middle">
|
|
<TSpan fill="#b92b27" className="font-footer-bold">
|
|
{"B\u0130Z\u0130 TAK\u0130P ED\u0130N"}
|
|
</TSpan>
|
|
<TSpan fill="#a1a1aa" className="font-footer-reg">
|
|
{" | "}
|
|
</TSpan>
|
|
<TSpan className="font-footer-reg">{"@gourmetbistro"}</TSpan>
|
|
</Text>
|
|
</G>
|
|
</Svg>
|
|
)
|
|
export default SvgComponent
|