polish: rebuild hero with asymmetric layout + animated geometric composition
All checks were successful
Build & Push / build-and-push (push) Successful in 1m24s
All checks were successful
Build & Push / build-and-push (push) Successful in 1m24s
- Asymmetric layout: text left-aligned (58%), geometric right (42%) - SVG background: scaled down, pushed right, cleaner architectural lines - Right column: 3 concentric rings rotating at different speeds/directions - Orbiting accent dots tracing circular paths - Tick marks, crosshair center, corner brackets, dimension lines - Radial glow backdrop for atmospheric warmth - Word-by-word headline stagger animation preserved Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,402 +1,205 @@
|
||||
import React from "react";
|
||||
|
||||
interface HeroGeometricProps {
|
||||
className?: string;
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function HeroGeometric({ className }: HeroGeometricProps) {
|
||||
// Arc center — pushed further right and scaled down
|
||||
const cx = 760
|
||||
const cy = 400
|
||||
const R = 180 // Main radius — compact, not dominating
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1440 900"
|
||||
viewBox="0 0 1000 800"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
style={{
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
overflow: "hidden",
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
{/* Celestial blue at various opacities — all values halved for a more atmospheric effect */}
|
||||
<style>{`
|
||||
.cb-fill-03 { fill: #5BA4D9; fill-opacity: 0.015; }
|
||||
.cb-fill-05 { fill: #5BA4D9; fill-opacity: 0.025; }
|
||||
.cb-fill-08 { fill: #5BA4D9; fill-opacity: 0.04; }
|
||||
.cb-fill-12 { fill: #5BA4D9; fill-opacity: 0.06; }
|
||||
.cb-fill-15 { fill: #5BA4D9; fill-opacity: 0.07; }
|
||||
.dn-stroke-06 { fill: none; stroke: #1C2B3A; stroke-opacity: 0.03; }
|
||||
.dn-stroke-08 { fill: none; stroke: #1C2B3A; stroke-opacity: 0.04; }
|
||||
.dn-stroke-10 { fill: none; stroke: #1C2B3A; stroke-opacity: 0.05; }
|
||||
.dn-stroke-14 { fill: none; stroke: #1C2B3A; stroke-opacity: 0.07; }
|
||||
.cb-stroke-08 { fill: none; stroke: #5BA4D9; stroke-opacity: 0.04; }
|
||||
.cb-stroke-12 { fill: none; stroke: #5BA4D9; stroke-opacity: 0.06; }
|
||||
.cb-dot { fill: #1C2B3A; fill-opacity: 0.06; }
|
||||
.cb-dot-sm { fill: #5BA4D9; fill-opacity: 0.05; }
|
||||
`}</style>
|
||||
</defs>
|
||||
{/* ━━━ BACKGROUND: Faint structural grid ━━━ */}
|
||||
<g data-layer="background" opacity="0.5">
|
||||
{/* Horizontal datum lines */}
|
||||
<line x1="0" y1="200" x2="1000" y2="200" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" strokeDasharray="8 24" />
|
||||
<line x1="0" y1="420" x2="1000" y2="420" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="6 20" />
|
||||
<line x1="0" y1="640" x2="1000" y2="640" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" strokeDasharray="8 24" />
|
||||
|
||||
{/* ─── BACKGROUND LAYER ─────────────────────────────────────────── */}
|
||||
<g data-layer="background">
|
||||
|
||||
{/* Large low-opacity rectangle — far upper-left anchor */}
|
||||
<rect
|
||||
x="-60" y="-40"
|
||||
width="680" height="480"
|
||||
rx="2"
|
||||
className="cb-fill-03 dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Horizon guide line — full width */}
|
||||
<line
|
||||
x1="0" y1="520"
|
||||
x2="1440" y2="520"
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="6 14"
|
||||
/>
|
||||
|
||||
{/* Vertical axis line — far right third */}
|
||||
<line
|
||||
x1="1060" y1="0"
|
||||
x2="1060" y2="900"
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="4 20"
|
||||
/>
|
||||
|
||||
{/* Large background circle — lower-right anchor */}
|
||||
<circle
|
||||
cx="1280" cy="740"
|
||||
r="320"
|
||||
className="cb-fill-03 dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Secondary background circle — upper-right bleed */}
|
||||
<circle
|
||||
cx="1380" cy="-60"
|
||||
r="200"
|
||||
className="cb-fill-03 dn-stroke-08"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Wide shallow rectangle — lower band */}
|
||||
<rect
|
||||
x="180" y="760"
|
||||
width="900" height="80"
|
||||
rx="1"
|
||||
className="cb-fill-03 dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Fine grid cluster — upper-left quadrant (sparse) */}
|
||||
{/* Horizontal grid lines */}
|
||||
{[80, 120, 160, 200, 240].map((y) => (
|
||||
<line
|
||||
key={`bg-hgrid-${y}`}
|
||||
x1="40" y1={y}
|
||||
x2="380" y2={y}
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
))}
|
||||
{/* Vertical grid lines */}
|
||||
{[60, 100, 140, 180, 220, 260, 300, 340, 380].map((x) => (
|
||||
<line
|
||||
key={`bg-vgrid-${x}`}
|
||||
x1={x} y1="60"
|
||||
x2={x} y2="260"
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Blueprint registration mark — upper left */}
|
||||
<line x1="28" y1="40" x2="28" y2="56" className="dn-stroke-10" strokeWidth="1" />
|
||||
<line x1="20" y1="48" x2="36" y2="48" className="dn-stroke-10" strokeWidth="1" />
|
||||
|
||||
{/* Blueprint registration mark — far right mid */}
|
||||
<line x1="1400" y1="418" x2="1400" y2="434" className="dn-stroke-10" strokeWidth="1" />
|
||||
<line x1="1392" y1="426" x2="1408" y2="426" className="dn-stroke-10" strokeWidth="1" />
|
||||
{/* Vertical datum lines */}
|
||||
<line x1="500" y1="0" x2="500" y2="800" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="6 20" />
|
||||
<line x1="680" y1="0" x2="680" y2="800" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="4 18" />
|
||||
</g>
|
||||
|
||||
{/* ─── MIDGROUND LAYER ──────────────────────────────────────────── */}
|
||||
{/* ━━━ MIDGROUND: The main arc composition ━━━ */}
|
||||
<g data-layer="midground">
|
||||
|
||||
{/* Large architectural rectangle — right column */}
|
||||
<rect
|
||||
x="1100" y="80"
|
||||
width="260" height="560"
|
||||
rx="3"
|
||||
className="cb-fill-05 dn-stroke-08"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Inset rectangle inside large right column */}
|
||||
<rect
|
||||
x="1126" y="108"
|
||||
width="208" height="120"
|
||||
rx="2"
|
||||
className="cb-fill-08 dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Tall thin divider — left of center */}
|
||||
<rect
|
||||
x="520" y="60"
|
||||
width="2" height="420"
|
||||
className="cb-fill-15"
|
||||
/>
|
||||
|
||||
{/* Wide horizontal band — upper area */}
|
||||
<rect
|
||||
x="460" y="60"
|
||||
width="540" height="1.5"
|
||||
className="cb-fill-12"
|
||||
/>
|
||||
|
||||
{/* Mid arc — upper right area, partial */}
|
||||
<path
|
||||
d="M 1060 160 A 180 180 0 0 1 1240 160"
|
||||
className="cb-stroke-08"
|
||||
{/* ── Main circle — the dominant visual element ── */}
|
||||
<circle
|
||||
cx={cx} cy={cy} r={R}
|
||||
fill="none"
|
||||
stroke="#5BA4D9"
|
||||
strokeOpacity="0.09"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* Concentric arc pair — lower left */}
|
||||
<path
|
||||
d="M 100 900 A 340 340 0 0 1 440 560"
|
||||
className="dn-stroke-08"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
d="M 60 900 A 380 380 0 0 1 440 520"
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="3 9"
|
||||
/>
|
||||
|
||||
{/* Section label rectangle — left */}
|
||||
<rect
|
||||
x="60" y="320"
|
||||
width="160" height="44"
|
||||
rx="2"
|
||||
className="cb-fill-08 dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Thin horizontal rule under label */}
|
||||
<line
|
||||
x1="60" y1="374"
|
||||
x2="220" y2="374"
|
||||
className="dn-stroke-08"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Dotted measurement track — horizontal mid */}
|
||||
<line
|
||||
x1="560" y1="440"
|
||||
x2="980" y2="440"
|
||||
className="dn-stroke-08"
|
||||
strokeWidth="0.75"
|
||||
strokeDasharray="2 6"
|
||||
/>
|
||||
{/* Tick marks on measurement track */}
|
||||
{[560, 640, 720, 800, 880, 980].map((x) => (
|
||||
<line
|
||||
key={`tick-${x}`}
|
||||
x1={x} y1="434"
|
||||
x2={x} y2="446"
|
||||
className="dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Small dimension rectangle — lower center */}
|
||||
<rect
|
||||
x="680" y="620"
|
||||
width="200" height="120"
|
||||
rx="2"
|
||||
className="cb-fill-05 dn-stroke-08"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Diagonal tension line — upper center to right */}
|
||||
<line
|
||||
x1="520" y1="60"
|
||||
x2="1100" y2="640"
|
||||
className="dn-stroke-06"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Medium circle — center-left */}
|
||||
{/* Inner concentric ring */}
|
||||
<circle
|
||||
cx="380" cy="480"
|
||||
r="90"
|
||||
className="cb-fill-05 dn-stroke-08"
|
||||
cx={cx} cy={cy} r={R * 0.65}
|
||||
fill="none"
|
||||
stroke="#5BA4D9"
|
||||
strokeOpacity="0.05"
|
||||
strokeWidth="0.75"
|
||||
strokeDasharray="4 12"
|
||||
/>
|
||||
|
||||
{/* Inner ring of medium circle */}
|
||||
{/* Outer concentric ring — larger, fainter */}
|
||||
<circle
|
||||
cx="380" cy="480"
|
||||
r="60"
|
||||
className="cb-stroke-08"
|
||||
cx={cx} cy={cy} r={R * 1.35}
|
||||
fill="none"
|
||||
stroke="#1C2B3A"
|
||||
strokeOpacity="0.035"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="3 16"
|
||||
/>
|
||||
|
||||
{/* ── Radius lines from center — architectural annotation ── */}
|
||||
{/* Vertical radius */}
|
||||
<line
|
||||
x1={cx} y1={cy} x2={cx} y2={cy - R}
|
||||
stroke="#5BA4D9" strokeOpacity="0.08" strokeWidth="0.75"
|
||||
/>
|
||||
{/* Top tick mark */}
|
||||
<line
|
||||
x1={cx - 8} y1={cy - R} x2={cx + 8} y2={cy - R}
|
||||
stroke="#5BA4D9" strokeOpacity="0.12" strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Diagonal radius — 45deg upper-right */}
|
||||
<line
|
||||
x1={cx} y1={cy}
|
||||
x2={cx + R * 0.707} y2={cy - R * 0.707}
|
||||
stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.5"
|
||||
strokeDasharray="4 8"
|
||||
/>
|
||||
|
||||
{/* Small circle — upper right cluster */}
|
||||
<circle
|
||||
cx="1200" cy="260"
|
||||
r="36"
|
||||
className="cb-fill-08 dn-stroke-10"
|
||||
{/* Horizontal radius — right */}
|
||||
<line
|
||||
x1={cx} y1={cy} x2={cx + R} y2={cy}
|
||||
stroke="#5BA4D9" strokeOpacity="0.06" strokeWidth="0.5"
|
||||
/>
|
||||
{/* Right tick */}
|
||||
<line
|
||||
x1={cx + R} y1={cy - 8} x2={cx + R} y2={cy + 8}
|
||||
stroke="#5BA4D9" strokeOpacity="0.1" strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* ── Center crosshair ── */}
|
||||
<line x1={cx - 12} y1={cy} x2={cx + 12} y2={cy} stroke="#5BA4D9" strokeOpacity="0.15" strokeWidth="0.75" />
|
||||
<line x1={cx} y1={cy - 12} x2={cx} y2={cy + 12} stroke="#5BA4D9" strokeOpacity="0.15" strokeWidth="0.75" />
|
||||
<circle cx={cx} cy={cy} r="2.5" fill="#5BA4D9" fillOpacity="0.12" />
|
||||
|
||||
{/* ── Angle arc at center — 90deg sweep ── */}
|
||||
<path
|
||||
d={`M ${cx} ${cy - 30} A 30 30 0 0 1 ${cx + 30} ${cy}`}
|
||||
fill="none"
|
||||
stroke="#5BA4D9"
|
||||
strokeOpacity="0.1"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Dot grid — right of center, 4x5 */}
|
||||
{[0, 1, 2, 3].map((col) =>
|
||||
{/* ── Dimension annotation — horizontal, above circle ── */}
|
||||
<line
|
||||
x1={cx - R} y1={cy - R - 30}
|
||||
x2={cx + R} y2={cy - R - 30}
|
||||
stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5"
|
||||
/>
|
||||
{/* End ticks */}
|
||||
<line x1={cx - R} y1={cy - R - 38} x2={cx - R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.75" />
|
||||
<line x1={cx + R} y1={cy - R - 38} x2={cx + R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.75" />
|
||||
{/* Label stub */}
|
||||
<rect x={cx - 18} y={cy - R - 37} width="36" height="7" rx="1" fill="#5BA4D9" fillOpacity="0.03" />
|
||||
|
||||
{/* ── Vertical dimension — right side ── */}
|
||||
<line
|
||||
x1={cx + R + 30} y1={cy - R}
|
||||
x2={cx + R + 30} y2={cy + R}
|
||||
stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.5"
|
||||
strokeDasharray="2 8"
|
||||
/>
|
||||
<line x1={cx + R + 22} y1={cy - R} x2={cx + R + 38} y2={cy - R} stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
|
||||
<line x1={cx + R + 22} y1={cy + R} x2={cx + R + 38} y2={cy + R} stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
|
||||
|
||||
{/* Subtle fill — atmospheric glow behind main circle */}
|
||||
<circle cx={cx} cy={cy} r={R * 0.8} fill="#5BA4D9" fillOpacity="0.015" />
|
||||
</g>
|
||||
|
||||
{/* ━━━ FOREGROUND: Crisp detail elements ━━━ */}
|
||||
<g data-layer="foreground">
|
||||
{/* ── Corner brackets — architectural framing ── */}
|
||||
{/* Top-right */}
|
||||
<path d="M 940 40 L 970 40 L 970 70" fill="none" stroke="#1C2B3A" strokeOpacity="0.12" strokeWidth="1" />
|
||||
{/* Bottom-right */}
|
||||
<path d="M 940 760 L 970 760 L 970 730" fill="none" stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
|
||||
{/* Top inner */}
|
||||
<path d="M 560 80 L 590 80" fill="none" stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.75" />
|
||||
<path d="M 560 80 L 560 110" fill="none" stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.75" />
|
||||
|
||||
{/* ── Tick marks around the main circle — spaced at 30deg intervals ── */}
|
||||
{[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
|
||||
const rad = (deg * Math.PI) / 180
|
||||
const x = cx + R * Math.cos(rad)
|
||||
const y = cy + R * Math.sin(rad)
|
||||
const nx = Math.cos(rad)
|
||||
const ny = Math.sin(rad)
|
||||
return (
|
||||
<line
|
||||
key={`tick-${deg}`}
|
||||
x1={x - nx * 6} y1={y - ny * 6}
|
||||
x2={x + nx * 6} y2={y + ny * 6}
|
||||
stroke="#5BA4D9"
|
||||
strokeOpacity="0.1"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* ── Small precision arc — upper right ── */}
|
||||
<path
|
||||
d={`M ${cx + 60} ${cy - R + 40} A 50 50 0 0 1 ${cx + 110} ${cy - R + 40}`}
|
||||
fill="none"
|
||||
stroke="#5BA4D9"
|
||||
strokeOpacity="0.12"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* ── Dot grid cluster — lower right quadrant ── */}
|
||||
{[0, 1, 2, 3, 4, 5].map((col) =>
|
||||
[0, 1, 2, 3, 4].map((row) => (
|
||||
<circle
|
||||
key={`dot-${col}-${row}`}
|
||||
cx={760 + col * 28}
|
||||
cy={160 + row * 28}
|
||||
r="1.5"
|
||||
className="cb-dot"
|
||||
cx={780 + col * 28}
|
||||
cy={560 + row * 28}
|
||||
r="1"
|
||||
fill="#1C2B3A"
|
||||
fillOpacity="0.06"
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* ─── FOREGROUND LAYER ─────────────────────────────────────────── */}
|
||||
<g data-layer="foreground">
|
||||
{/* ── Scattered accent dots ── */}
|
||||
<circle cx={cx + 140} cy={cy - 80} r="2" fill="#5BA4D9" fillOpacity="0.1" />
|
||||
<circle cx={cx - 120} cy={cy + 100} r="1.5" fill="#5BA4D9" fillOpacity="0.07" />
|
||||
<circle cx={cx + 200} cy={cy + 150} r="1.5" fill="#1C2B3A" fillOpacity="0.06" />
|
||||
|
||||
{/* Blueprint frame — upper left inset panel */}
|
||||
<rect
|
||||
x="80" y="80"
|
||||
width="320" height="200"
|
||||
rx="2"
|
||||
className="cb-fill-05 dn-stroke-14"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* Inner division of upper-left panel */}
|
||||
<line
|
||||
x1="80" y1="160"
|
||||
x2="400" y2="160"
|
||||
className="dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<line
|
||||
x1="240" y1="80"
|
||||
x2="240" y2="280"
|
||||
className="dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Corner notches on blueprint frame */}
|
||||
<path d="M 80 100 L 80 80 L 100 80" className="dn-stroke-14" strokeWidth="1" fill="none" />
|
||||
<path d="M 380 80 L 400 80 L 400 100" className="dn-stroke-14" strokeWidth="1" fill="none" />
|
||||
<path d="M 80 260 L 80 280 L 100 280" className="dn-stroke-14" strokeWidth="1" fill="none" />
|
||||
<path d="M 380 280 L 400 280 L 400 260" className="dn-stroke-14" strokeWidth="1" fill="none" />
|
||||
|
||||
{/* Precision arc — upper left panel, quarter circle */}
|
||||
<path
|
||||
d="M 160 80 A 80 80 0 0 1 240 160"
|
||||
className="cb-stroke-12"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
||||
{/* Foreground tall rect — left bleed */}
|
||||
<rect
|
||||
x="-20" y="400"
|
||||
width="100" height="340"
|
||||
rx="2"
|
||||
className="cb-fill-08 dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
|
||||
{/* Foreground arc — lower right */}
|
||||
<path
|
||||
d="M 1140 640 A 240 240 0 0 0 1380 640"
|
||||
className="dn-stroke-10"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M 1160 640 A 200 200 0 0 0 1360 640"
|
||||
className="cb-stroke-12"
|
||||
strokeWidth="0.75"
|
||||
strokeDasharray="3 7"
|
||||
/>
|
||||
|
||||
{/* Callout line — from blueprint panel to right */}
|
||||
<line
|
||||
x1="400" y1="180"
|
||||
x2="520" y2="180"
|
||||
className="dn-stroke-14"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<circle cx="520" cy="180" r="3" className="cb-fill-15" />
|
||||
|
||||
{/* Thin vertical guide — right of blueprint panel */}
|
||||
<line
|
||||
x1="520" y1="80"
|
||||
x2="520" y2="360"
|
||||
className="dn-stroke-08"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="2 8"
|
||||
/>
|
||||
|
||||
{/* Small accent square — upper center */}
|
||||
<rect
|
||||
x="690" y="100"
|
||||
width="48" height="48"
|
||||
rx="1"
|
||||
className="cb-fill-12 dn-stroke-14"
|
||||
strokeWidth="1"
|
||||
transform="rotate(12 714 124)"
|
||||
/>
|
||||
|
||||
{/* Dot accent — scattered foreground points */}
|
||||
<circle cx="460" cy="320" r="2.5" className="cb-dot-sm" />
|
||||
<circle cx="560" cy="280" r="2" className="cb-dot-sm" />
|
||||
<circle cx="600" cy="340" r="1.5" className="cb-dot-sm" />
|
||||
<circle cx="1080" cy="680" r="2.5" className="cb-dot-sm" />
|
||||
<circle cx="1140" cy="700" r="1.5" className="cb-dot-sm" />
|
||||
<circle cx="300" cy="600" r="2" className="cb-dot-sm" />
|
||||
<circle cx="340" cy="560" r="1.5" className="cb-dot-sm" />
|
||||
|
||||
{/* Small labeled rectangle — lower left */}
|
||||
<rect
|
||||
x="100" y="700"
|
||||
width="120" height="60"
|
||||
rx="1"
|
||||
className="cb-fill-08 dn-stroke-10"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
{/* Tick detail inside small rect */}
|
||||
<line x1="100" y1="720" x2="220" y2="720" className="dn-stroke-08" strokeWidth="0.5" />
|
||||
<line x1="160" y1="700" x2="160" y2="760" className="dn-stroke-08" strokeWidth="0.5" />
|
||||
|
||||
{/* Fine detail lines — lower right corner cluster */}
|
||||
<line x1="1300" y1="820" x2="1440" y2="820" className="dn-stroke-08" strokeWidth="0.5" />
|
||||
<line x1="1300" y1="840" x2="1440" y2="840" className="dn-stroke-06" strokeWidth="0.5" strokeDasharray="3 6" />
|
||||
<line x1="1320" y1="800" x2="1320" y2="900" className="dn-stroke-08" strokeWidth="0.5" />
|
||||
<circle cx="1320" cy="820" r="3" className="cb-fill-15" />
|
||||
|
||||
{/* Radius annotation arc — center large circle */}
|
||||
<path
|
||||
d="M 320 480 L 380 480"
|
||||
className="dn-stroke-14"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<circle cx="380" cy="480" r="2" className="cb-fill-15" />
|
||||
{/* ── Sparse left-side balance elements ── */}
|
||||
<line x1="60" y1="350" x2="180" y2="350" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="4 16" />
|
||||
<line x1="100" y1="500" x2="100" y2="530" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" />
|
||||
<line x1="88" y1="515" x2="112" y2="515" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user