238 lines
7.6 KiB
TypeScript
238 lines
7.6 KiB
TypeScript
import Svg, {
|
|
SvgProps,
|
|
Defs,
|
|
G,
|
|
Path,
|
|
Circle,
|
|
Use,
|
|
Rect,
|
|
Text,
|
|
} from "react-native-svg"
|
|
import { memo } from "react"
|
|
const SvgComponent = (props: SvgProps) => (
|
|
<Svg width={400} height={580} {...props}>
|
|
<Defs>
|
|
<G id="b">
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={1.3}
|
|
d="M0-22c22-8 36 6 38 22-2 16-16 30-38 22Z"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={0.9}
|
|
d="M0-12c14-6 24 2 26 12-2 10-12 18-26 12Z"
|
|
/>
|
|
<Path stroke="#c59b4b" strokeWidth={0.8} d="M0 0h26" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={1.2}
|
|
d="M0-8c16-28 34-32 46-18C36-12 20-4 0-8ZM0 8c16 28 34 32 46 18C36 12 20 4 0 8Z"
|
|
/>
|
|
<Circle cx={48} cy={-28} r={1.5} fill="#c59b4b" />
|
|
<Circle cx={48} cy={28} r={1.5} fill="#c59b4b" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={1.1}
|
|
d="M0-35c24-21 52-15 56-1-14 6-32 12-56 1Zm0 70c24 21 52 15 56 1-14-6-32-12-56-1Z"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
d="M28-44c14-20 36-10 30 2-10 6-20 4-30-2Zm0 88c14 20 36 10 30-2-10-6-20-4-30 2Z"
|
|
/>
|
|
<Circle cx={60} cy={-44} r={1.2} fill="#c59b4b" />
|
|
<Circle cx={60} cy={44} r={1.2} fill="#c59b4b" />
|
|
<Circle cx={34} cy={-58} r={1.2} fill="#c59b4b" />
|
|
<Circle cx={34} cy={58} r={1.2} fill="#c59b4b" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeLinecap="round"
|
|
d="M0-60c22-15 36-35 32-55-6 15-16 30-32 55M0 60c22 15 36 35 32 55-6-15-16-30-32-55"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={0.9}
|
|
d="M14-78c8-6 12 2 6 6-4 0-6-4-6-6Zm0 156c8 6 12-2 6-6-4 0-6 4-6 6Z"
|
|
/>
|
|
<Circle cx={32} cy={-116} r={1.5} fill="#c59b4b" />
|
|
<Circle cx={32} cy={116} r={1.5} fill="#c59b4b" />
|
|
</G>
|
|
<G id="a">
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={1.3}
|
|
d="M18 64c0-28 18-46 46-46"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={0.8}
|
|
d="M24 52c0-16 12-28 28-28"
|
|
/>
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeLinecap="round"
|
|
strokeWidth={0.9}
|
|
d="M28 32c4-6 10-4 8 2-2 4-8 2-6-4s10-6 14-2"
|
|
/>
|
|
<Circle cx={28} cy={28} r={1.8} fill="#c59b4b" />
|
|
<Circle cx={48} cy={18} r={1.4} fill="#c59b4b" />
|
|
<Circle cx={18} cy={48} r={1.4} fill="#c59b4b" />
|
|
</G>
|
|
</Defs>
|
|
<Path fill="#fdfdfd" d="M0 0h400v580H0z" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeWidth={1.2}
|
|
d="M20 14h360v552H20z"
|
|
/>
|
|
<Use href="#a" />
|
|
<Use href="#a" transform="matrix(-1 0 0 1 400 0)" />
|
|
<Use href="#a" transform="matrix(1 0 0 -1 0 580)" />
|
|
<Use href="#a" transform="rotate(180 200 290)" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeLinecap="round"
|
|
strokeWidth={1.2}
|
|
d="M132 62c8-4 16 2 24-2 4-2 2-6-2-4m114 6c-8-4-16 2-24-2-4-2-2-6 2-4"
|
|
/>
|
|
<Use href="#b" transform="translate(0 310)" />
|
|
<Use href="#b" transform="matrix(-1 0 0 1 400 310)" />
|
|
<Path
|
|
fill="none"
|
|
stroke="#c59b4b"
|
|
strokeLinecap="square"
|
|
strokeWidth={2.2}
|
|
d="M114 278v-58h54m118 58v-58h-54M114 342v58h54m118-58v58h-54"
|
|
/>
|
|
<G transform="translate(125 230)">
|
|
<Rect
|
|
width={150}
|
|
height={150}
|
|
fill="#fff"
|
|
stroke="#eae5d9"
|
|
strokeWidth={1.5}
|
|
rx={12}
|
|
/>
|
|
<Rect
|
|
width={134}
|
|
height={134}
|
|
x={8}
|
|
y={8}
|
|
fill="#fafaf8"
|
|
stroke="#c59b4b"
|
|
strokeDasharray="4 3"
|
|
strokeOpacity={0.35}
|
|
rx={8}
|
|
/>
|
|
<Text
|
|
x={75}
|
|
y={79}
|
|
fill="#c59b4b"
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={10}
|
|
fontWeight={700}
|
|
letterSpacing={1}
|
|
textAnchor="middle"
|
|
>
|
|
{"QR KOD ALANI"}
|
|
</Text>
|
|
</G>
|
|
<G fill="#111" textAnchor="middle">
|
|
<Text
|
|
x={200}
|
|
y={66}
|
|
fontFamily="'Playfair Display', 'Cinzel', 'Times New Roman', serif"
|
|
fontSize={17}
|
|
fontWeight={700}
|
|
letterSpacing={3}
|
|
>
|
|
{"THE"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={112}
|
|
fontFamily="'Playfair Display', 'Cinzel', 'Times New Roman', serif"
|
|
fontSize={34}
|
|
fontWeight={700}
|
|
letterSpacing={1.5}
|
|
>
|
|
{"CRIMSON"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={152}
|
|
fontFamily="'Playfair Display', 'Cinzel', 'Times New Roman', serif"
|
|
fontSize={34}
|
|
fontWeight={700}
|
|
letterSpacing={1.5}
|
|
>
|
|
{"PETAL"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={184}
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={11}
|
|
fontWeight={700}
|
|
letterSpacing={1.8}
|
|
>
|
|
{"FINE DINING EXPERIENCE"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={460}
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={22}
|
|
fontWeight={800}
|
|
letterSpacing={0.5}
|
|
>
|
|
{"SCAN FOR"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={488}
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={22}
|
|
fontWeight={800}
|
|
letterSpacing={0.5}
|
|
>
|
|
{"OUR MENU"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={526}
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={11.5}
|
|
fontWeight={600}
|
|
letterSpacing={0.3}
|
|
>
|
|
{"contactless ordering"}
|
|
</Text>
|
|
<Text
|
|
x={200}
|
|
y={544}
|
|
fontFamily="Inter, Arial, sans-serif"
|
|
fontSize={11.5}
|
|
fontWeight={600}
|
|
letterSpacing={0.3}
|
|
>
|
|
{"scan with camera"}
|
|
</Text>
|
|
</G>
|
|
</Svg>
|
|
)
|
|
const Memo = memo(SvgComponent)
|
|
export default Memo
|