added logo and bagFix
This commit is contained in:
SlimusMinus
268
src/components/NahodkaLogo.jsx
Normal file
268
src/components/NahodkaLogo.jsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import React from "react";
|
||||
|
||||
export default function NahodkaLogo({
|
||||
width = 760,
|
||||
height = 360,
|
||||
className,
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="-40 100 760 200"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* ========================= */}
|
||||
{/* ЦВЕТ БУКВ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="coral"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#E99A78" />
|
||||
<stop offset="100%" stopColor="#D97956" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* РАМКА ЛУПЫ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="magnifier"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#EA9B78" />
|
||||
<stop offset="100%" stopColor="#D57250" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* СТЕКЛО */}
|
||||
{/* ========================= */}
|
||||
|
||||
<radialGradient id="glass">
|
||||
<stop offset="0%" stopColor="#FFFDF8" />
|
||||
<stop offset="100%" stopColor="#F3E9DA" />
|
||||
</radialGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* РУЧКА */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="handle"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#86A383" />
|
||||
<stop offset="100%" stopColor="#617D68" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* ТЕНЬ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<filter
|
||||
id="shadow"
|
||||
x="-30%"
|
||||
y="-30%"
|
||||
width="160%"
|
||||
height="180%"
|
||||
>
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="5"
|
||||
stdDeviation="5"
|
||||
floodColor="#8F4938"
|
||||
floodOpacity="0.25"
|
||||
/>
|
||||
</filter>
|
||||
|
||||
<filter
|
||||
id="magnifierShadow"
|
||||
x="-40%"
|
||||
y="-40%"
|
||||
width="180%"
|
||||
height="200%"
|
||||
>
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="5"
|
||||
stdDeviation="4"
|
||||
floodColor="#8F4938"
|
||||
floodOpacity="0.3"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ЛЕВАЯ ЧАСТЬ — "НАХ" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
<g
|
||||
fill="url(#coral)"
|
||||
filter="url(#shadow)"
|
||||
fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
|
||||
fontSize="135"
|
||||
fontWeight="800"
|
||||
>
|
||||
<text
|
||||
x="30"
|
||||
y="225"
|
||||
letterSpacing="1"
|
||||
>
|
||||
Нах
|
||||
</text>
|
||||
</g>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ЛУПА — "О" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
<g
|
||||
transform="translate(352 190)"
|
||||
filter="url(#magnifierShadow)"
|
||||
>
|
||||
{/* Ручка */}
|
||||
|
||||
<rect
|
||||
x="34"
|
||||
y="70"
|
||||
width="28"
|
||||
height="105"
|
||||
rx="14"
|
||||
transform="rotate(-43 34 70)"
|
||||
fill="url(#handle)"
|
||||
stroke="#D97956"
|
||||
strokeWidth="6"
|
||||
/>
|
||||
|
||||
{/* Внешняя рамка */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="70"
|
||||
fill="url(#magnifier)"
|
||||
/>
|
||||
|
||||
{/* Внутренняя рамка */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="58"
|
||||
fill="#F7EEDF"
|
||||
/>
|
||||
|
||||
{/* Стекло */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="53"
|
||||
fill="url(#glass)"
|
||||
/>
|
||||
|
||||
{/* Блик */}
|
||||
|
||||
<ellipse
|
||||
cx="-22"
|
||||
cy="-25"
|
||||
rx="8"
|
||||
ry="15"
|
||||
transform="rotate(35 -22 -25)"
|
||||
fill="white"
|
||||
opacity="0.65"
|
||||
/>
|
||||
|
||||
{/* ================================================= */}
|
||||
{/* ЛАПКА */}
|
||||
{/* ================================================= */}
|
||||
|
||||
<g transform="translate(0 15)">
|
||||
<path
|
||||
d="
|
||||
M 0 25
|
||||
C -8 18 -25 12 -25 -2
|
||||
C -25 -13 -14 -18 -5 -12
|
||||
L 0 -8
|
||||
L 5 -12
|
||||
C 14 -18 25 -13 25 -2
|
||||
C 25 12 8 18 0 25
|
||||
Z
|
||||
"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-22"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
transform="rotate(-25 -22 -20)"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-7"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="9"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="23"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
transform="rotate(25 23 -20)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
{/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
|
||||
|
||||
<g
|
||||
fill="url(#coral)"
|
||||
filter="url(#shadow)"
|
||||
fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
|
||||
fontSize="135"
|
||||
fontWeight="800"
|
||||
>
|
||||
<text
|
||||
x="436"
|
||||
y="225"
|
||||
letterSpacing="1"
|
||||
>
|
||||
дка
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user