app/components/site-logo.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/shell-footer.tsx, app/components/site-header.tsx.

Source

1// Inline, not an `<img>`: the theme is a data attribute, so a `<picture>` with
2// `prefers-color-scheme` would ignore the manual toggle. The warm three keep literal fills
3// because they are identical in both variants. Generated from public/dustin-edwards-logo.svg:
4// never hand-edit the path data.
5
6/** The eight paths, in the spec's paint order: ring, bowl, base, arc, tube, amber, pale, cap. */
7const MARK = (
8  <>
9    <path className="site-logo-brand" d="M 271.75 306.65 A 112.5 112.5 0 1 1 167.85 117.27 L 177.21 159.48 A 69.2 69.2 0 1 0 238.83 273.73 L 271.75 306.65 Z" />
10    <path className="site-logo-brand" d="M 212.00 273.20 L 290.80 273.20 A 39.4 39.4 0 0 1 212.00 273.20 Z" />
11    <path className="site-logo-brand" d="M 81.40 341.70 A 44.9 44.9 0 0 1 119.10 312.62 L 271.60 312.62 A 44.9 44.9 0 0 1 309.30 341.70 L 81.40 341.70 Z" />
12    <path fill="#CE7F44" d="M 173.37 117.10 A 111.6 111.6 0 0 1 288.36 170.46 L 306.63 201.48 L 275.44 219.85 L 257.17 188.83 A 75.4 75.4 0 0 0 193.75 151.72 Z" />
13    <path className="site-logo-brand" d="M 109.47 86.65 L 143.59 66.56 L 217.44 191.92 L 183.32 212.02 Z" />
14    <path fill="#E0A428" d="M 225.72 207.36 L 257.51 188.63 L 275.78 219.65 L 243.99 238.38 Z" />
15    <path fill="#E2BC6B" d="M 192.20 227.10 L 226.06 207.15 L 244.33 238.17 L 210.47 258.12 Z" />
16    <path className="site-logo-brand" d="M 134.88 51.38 L 100.42 71.68 L 80.12 37.21 L 114.58 16.91 Z" />
17  </>
18);
19
20// The viewBox and intrinsic size are copied from dustin-edwards-logo-header.svg.
21export function SiteLogoHeader({ className }: { className?: string }) {
22  return (
23    <svg
24      className={className}
25      viewBox="78 15 232 328"
26      width="36"
27      height="50"
28      aria-hidden="true"
29      focusable="false"
30    >
31      {MARK}
32    </svg>
33  );
34}