| 1 | export function SteppingCouple({ className = "" }: { className?: string }) { |
| 2 | return ( |
| 3 | <div className={`emblem-float ${className}`}> |
| 4 | <svg |
| 5 | viewBox="0 0 400 500" |
| 6 | fill="none" |
| 7 | xmlns="http://www.w3.org/2000/svg" |
| 8 | role="img" |
| 9 | aria-label="Emblem of a stepping couple mid-turn" |
| 10 | className="h-full w-full" |
| 11 | > |
| 12 | <g className="emblem-sway"> |
| 13 | <ellipse |
| 14 | className="emblem-in e5" |
| 15 | cx="175" |
| 16 | cy="440" |
| 17 | rx="135" |
| 18 | ry="17" |
| 19 | stroke="var(--bone)" |
| 20 | strokeOpacity="0.15" |
| 21 | strokeWidth="1.5" |
| 22 | /> |
| 23 | |
| 24 | <g className="emblem-in e1"> |
| 25 | <circle cx="140" cy="114" r="10" fill="var(--bone)" /> |
| 26 | <path |
| 27 | d="M136 130 C124 160 122 192 134 222 L146 224 C141 194 142 164 148 136 C144 127 140 127 136 130 Z" |
| 28 | fill="var(--bone)" |
| 29 | /> |
| 30 | <path |
| 31 | d="M134 220 C100 260 68 324 58 404 C88 430 138 432 162 414 C155 344 150 278 146 222 Z" |
| 32 | fill="var(--bone)" |
| 33 | /> |
| 34 | <path |
| 35 | className="emblem-glint" |
| 36 | d="M126 248 C102 288 88 336 86 388" |
| 37 | stroke="var(--gold)" |
| 38 | strokeWidth="2.5" |
| 39 | strokeLinecap="round" |
| 40 | /> |
| 41 | </g> |
| 42 | |
| 43 | <g className="emblem-in e2"> |
| 44 | <circle cx="236" cy="95" r="11.5" fill="var(--bone)" /> |
| 45 | <path |
| 46 | d="M236 109 C226 109 216 115 213 127 C207 167 214 210 227 250 C238 256 250 256 259 249 C268 209 269 166 261 126 C257 115 247 109 236 109 Z" |
| 47 | fill="var(--bone)" |
| 48 | /> |
| 49 | <path |
| 50 | d="M261 130 C270 154 274 182 272 210 C271 220 265 224 260 220 C263 192 260 160 253 136 Z" |
| 51 | fill="var(--bone)" |
| 52 | /> |
| 53 | <path |
| 54 | d="M226 244 C221 300 216 352 211 398 C202 404 195 410 194 418 C203 424 218 423 224 415 C229 376 235 336 241 300 C244 282 245 262 245 246 Z" |
| 55 | fill="var(--bone)" |
| 56 | /> |
| 57 | <path |
| 58 | d="M259 246 C262 300 264 356 264 402 C270 406 276 411 278 417 C271 422 257 421 252 413 C248 372 245 334 243 300 C242 282 242 262 242 248 Z" |
| 59 | fill="var(--bone)" |
| 60 | /> |
| 61 | <path |
| 62 | className="emblem-glint" |
| 63 | d="M239 116 C241 134 244 152 248 170" |
| 64 | stroke="var(--gold)" |
| 65 | strokeWidth="2.5" |
| 66 | strokeLinecap="round" |
| 67 | /> |
| 68 | </g> |
| 69 | |
| 70 | <path |
| 71 | className="emblem-draw e3" |
| 72 | pathLength={1} |
| 73 | d="M226 132 C205 103 186 94 166 98" |
| 74 | stroke="var(--bone)" |
| 75 | strokeWidth="6.5" |
| 76 | strokeLinecap="round" |
| 77 | /> |
| 78 | <path |
| 79 | className="emblem-draw e4" |
| 80 | pathLength={1} |
| 81 | d="M150 132 C156 120 160 110 163 100" |
| 82 | stroke="var(--bone)" |
| 83 | strokeWidth="2.75" |
| 84 | strokeLinecap="round" |
| 85 | /> |
| 86 | |
| 87 | <circle className="emblem-pop e6" cx="164" cy="98" r="5" fill="var(--gold)" /> |
| 88 | </g> |
| 89 | </svg> |
| 90 | </div> |
| 91 | ); |
| 92 | } |