| 1 | /** |
| 2 | * The Codewhale brand mark traced from the supplied final artwork. |
| 3 | */ |
| 4 | const WHALE_MARK = |
| 5 | "M 211.759 469.126 C 191.280 466.358 166.740 459.281 148.669 450.933 C 137.944 445.978 137.708 444.492 147.386 442.873 C 162.950 440.270 182.911 431.903 197.412 421.903 C 208.107 414.528 222.871 398.950 227.904 389.729 C 228.497 388.643 225.903 390.576 222.139 394.025 C 213.396 402.036 204.357 408.028 192.691 413.545 C 158.373 429.776 122.240 428.876 89.841 410.983 C 78.798 404.885 71.269 398.348 62.125 386.920 C 31.951 349.206 16.901 305.466 16.901 255.482 C 16.901 206.943 33.640 159.838 64.440 121.703 C 111.469 63.475 186.486 34.176 256.497 46.692 C 268.056 48.759 286.008 54.101 288.636 56.257 L 290.796 58.029 L 288.311 62.801 C 284.863 69.421 274.479 80.154 266.190 85.664 C 262.368 88.205 255.644 91.529 251.248 93.052 C 244.132 95.516 243.554 95.895 245.984 96.505 C 248.804 97.213 254.206 96.862 270.355 94.924 C 283.318 93.368 293.079 94.872 310.680 101.138 C 330.307 108.125 345.213 112.582 353.764 114.018 C 358.334 114.786 361.319 115.794 361.661 116.685 C 363.320 121.008 349.053 137.395 337.939 143.932 C 334.429 145.997 327.978 148.880 323.604 150.340 C 316.545 152.696 314.140 152.994 302.229 152.985 C 287.046 152.974 281.417 151.727 269.918 145.829 C 264.842 143.226 260.404 139.692 253.515 132.769 C 243.257 122.461 237.445 118.925 226.498 116.332 C 196.283 109.177 160.483 119.340 131.001 143.443 C 114.090 157.269 101.527 174.990 93.047 196.983 C 87.965 210.163 86.204 219.746 86.224 234.128 C 86.265 263.885 97.393 281.372 122.165 290.608 C 127.662 292.658 131.037 293.137 142.664 293.517 C 165.823 294.275 182.337 290.007 231.146 270.650 C 299.879 243.390 348.689 228.976 395.530 222.106 C 412.810 219.572 452.655 218.388 462.814 220.107 C 480.607 223.118 489.106 228.538 492.618 239.112 C 494.120 243.634 494.290 246.619 493.776 259.403 C 492.987 279.032 490.534 289.883 481.997 311.499 C 447.936 397.744 367.611 458.036 271.849 469.238 C 255.937 471.099 225.945 471.044 211.759 469.126 Z M 268.570 453.799 C 324.066 448.214 375.534 424.502 414.738 386.457 C 437.939 363.942 455.183 338.976 467.076 310.680 C 473.360 295.729 479.593 272.970 477.873 271.251 C 474.893 268.270 451.236 270.950 436.056 275.988 C 410.958 284.317 379.331 305.900 352.435 333.051 C 337.949 347.675 329.137 358.512 309.500 385.857 C 293.525 408.102 285.758 417.452 273.242 429.510 C 262.916 439.457 254.375 445.852 244.220 451.239 L 237.443 454.835 L 247.859 454.835 C 253.588 454.835 262.908 454.369 268.570 453.799 Z M 291.877 436.086 C 291.586 435.616 294.356 434.419 298.032 433.425 C 339.084 422.327 383.749 392.629 411.885 357.724 C 424.930 341.540 439.445 316.946 444.490 302.478 C 445.205 300.427 446.123 298.750 446.531 298.750 C 448.652 298.750 438.704 323.522 431.035 337.337 C 424.713 348.725 422.249 352.547 414.573 362.874 C 387.281 399.591 349.152 424.467 304.976 434.375 C 291.935 437.300 292.575 437.216 291.877 436.086 Z M 314.242 403.739 C 314.470 403.523 318.540 401.320 323.286 398.845 C 354.190 382.728 385.388 353.647 402.926 324.610 C 404.997 321.181 406.930 318.614 407.221 318.905 C 408.529 320.213 394.836 342.688 385.885 353.926 C 373.881 368.998 359.917 381.742 345.696 390.606 C 337.012 396.018 319.186 404.132 315.978 404.132 C 314.796 404.132 314.014 403.955 314.242 403.739 Z M 300.106 344.750 C 304.411 341.565 305.548 338.263 303.789 334.053 C 300.211 325.490 284.753 325.447 280.680 333.988 C 279.096 337.310 279.096 337.735 280.679 341.054 C 281.688 343.169 283.655 345.168 285.585 346.040 C 289.707 347.900 296.685 347.281 300.106 344.750 Z"; |
| 6 | |
| 7 | const VIEW_BOX = "0 0 512 512"; |
| 8 | |
| 9 | export function Whale({ |
| 10 | size = 36, |
| 11 | className = "", |
| 12 | caustic = false, |
| 13 | }: { |
| 14 | size?: number; |
| 15 | className?: string; |
| 16 | /** |
| 17 | * Ambient light passing over the mark — `ambient_life.rs`'s caustic at its |
| 18 | * literal amplitude and cadence. Exactly one whale on the page may carry it |
| 19 | * (the footer's); two caustics is chrome. The fixed gradient/clip ids are |
| 20 | * safe for the same reason. |
| 21 | */ |
| 22 | caustic?: boolean; |
| 23 | }) { |
| 24 | return ( |
| 25 | <svg |
| 26 | viewBox={VIEW_BOX} |
| 27 | width={size} |
| 28 | height={size} |
| 29 | className={`codewhale-mark ${className}`} |
| 30 | aria-hidden="true" |
| 31 | fill="none" |
| 32 | > |
| 33 | {caustic ? ( |
| 34 | <defs> |
| 35 | <clipPath id="codewhale-caustic-clip"> |
| 36 | <path d={WHALE_MARK} fillRule="evenodd" /> |
| 37 | </clipPath> |
| 38 | <linearGradient id="codewhale-caustic-light" x1="0" y1="0" x2="1" y2="0"> |
| 39 | <stop offset="0%" stopColor="#90b9ff" stopOpacity="0" /> |
| 40 | <stop offset="50%" stopColor="#90b9ff" stopOpacity="0.3" /> |
| 41 | <stop offset="100%" stopColor="#90b9ff" stopOpacity="0" /> |
| 42 | </linearGradient> |
| 43 | </defs> |
| 44 | ) : null} |
| 45 | |
| 46 | <path |
| 47 | className="codewhale-mark-primary" |
| 48 | d={WHALE_MARK} |
| 49 | fill="currentColor" |
| 50 | fillRule="evenodd" |
| 51 | /> |
| 52 | |
| 53 | {caustic ? ( |
| 54 | <g clipPath="url(#codewhale-caustic-clip)"> |
| 55 | <rect |
| 56 | className="codewhale-caustic" |
| 57 | x="-40" |
| 58 | y="0" |
| 59 | width="40" |
| 60 | height="100" |
| 61 | fill="url(#codewhale-caustic-light)" |
| 62 | /> |
| 63 | </g> |
| 64 | ) : null} |
| 65 | </svg> |
| 66 | ); |
| 67 | } |
| 68 |