● Zion Boggan
repos/Docket/components/owl.tsx
zionboggan.com ↗
Code Commits Tags
129 lines · tsx
History for this file →
1
2
3
type OwlProps = { size?: number; className?: string; title?: string };
4
5
export function OwlBust({ size = 56, className, title = "Docket archivist owl" }: OwlProps) {
6
  return (
7
    <svg
8
      width={size}
9
      height={size}
10
      viewBox="0 0 120 120"
11
      className={className}
12
      role="img"
13
      aria-label={title}
14
      xmlns="http://www.w3.org/2000/svg"
15
    >
16
      <path d="M34 43 Q36 19 50 35 Q43 38 38 43 Z" fill="#2A2E35" />
17
      <path d="M86 43 Q84 19 70 35 Q77 38 82 43 Z" fill="#2A2E35" />
18
      <ellipse cx="60" cy="62" rx="43" ry="43" fill="#2A2E35" />
19
      <ellipse cx="60" cy="87" rx="25" ry="21" fill="#363B44" />
20
      <circle cx="44" cy="58" r="22" fill="#3A4049" />
21
      <circle cx="76" cy="58" r="22" fill="#3A4049" />
22
      <path d="M22 50 L13 46" stroke="#E0A53B" strokeWidth="3" strokeLinecap="round" fill="none" />
23
      <path d="M98 50 L107 46" stroke="#E0A53B" strokeWidth="3" strokeLinecap="round" fill="none" />
24
      <circle cx="44" cy="57" r="15" fill="#F2EFE9" />
25
      <circle cx="76" cy="57" r="15" fill="#F2EFE9" />
26
      <circle cx="46" cy="59" r="7.5" fill="#0B0C0E" />
27
      <circle cx="74" cy="59" r="7.5" fill="#0B0C0E" />
28
      <circle cx="48.5" cy="56.5" r="2.2" fill="#F2EFE9" />
29
      <circle cx="76.5" cy="56.5" r="2.2" fill="#F2EFE9" />
30
      <circle cx="44" cy="57" r="17" fill="none" stroke="#E0A53B" strokeWidth="3.5" />
31
      <circle cx="76" cy="57" r="17" fill="none" stroke="#E0A53B" strokeWidth="3.5" />
32
      <path d="M58 56 Q60 51 62 56" fill="none" stroke="#E0A53B" strokeWidth="3" strokeLinecap="round" />
33
      <path d="M60 64 L54.5 70 L60 76 L65.5 70 Z" fill="#C9A66B" />
34
      <path d="M34 38 Q40 33 47 35" stroke="#F2EFE9" strokeWidth="2.4" strokeLinecap="round" fill="none" opacity="0.85" />
35
      <path d="M86 38 Q80 33 73 35" stroke="#F2EFE9" strokeWidth="2.4" strokeLinecap="round" fill="none" opacity="0.85" />
36
    </svg>
37
  );
38
}
39
40
export function OwlFull({ size = 200, className, title = "Docket archivist owl" }: OwlProps) {
41
  return (
42
    <svg
43
      width={size}
44
      height={size}
45
      viewBox="0 0 240 240"
46
      className={className}
47
      role="img"
48
      aria-label={title}
49
      xmlns="http://www.w3.org/2000/svg"
50
    >
51
      <path d="M86 58 Q90 22 118 50 Q104 53 95 60 Z" fill="#2A2E35" />
52
      <path d="M154 58 Q150 22 122 50 Q136 53 145 60 Z" fill="#2A2E35" />
53
      <ellipse cx="120" cy="118" rx="62" ry="80" fill="#2A2E35" />
54
      <path d="M64 96 Q50 140 66 188 Q60 144 74 104 Z" fill="#22262D" />
55
      <path d="M176 96 Q190 140 174 188 Q180 144 166 104 Z" fill="#22262D" />
56
      <ellipse cx="120" cy="140" rx="40" ry="50" fill="#363B44" />
57
      <path d="M108 150 Q120 156 132 150" stroke="#2E333B" strokeWidth="2.4" fill="none" opacity="0.7" />
58
      <path d="M108 164 Q120 170 132 164" stroke="#2E333B" strokeWidth="2.4" fill="none" opacity="0.7" />
59
      <circle cx="100" cy="92" r="35" fill="#3A4049" />
60
      <circle cx="140" cy="92" r="35" fill="#3A4049" />
61
      <path d="M74 80 L60 74" stroke="#E0A53B" strokeWidth="4.2" strokeLinecap="round" fill="none" />
62
      <path d="M166 80 L180 74" stroke="#E0A53B" strokeWidth="4.2" strokeLinecap="round" fill="none" />
63
      <circle cx="99" cy="90" r="22" fill="#F2EFE9" />
64
      <circle cx="141" cy="90" r="22" fill="#F2EFE9" />
65
      <circle cx="102" cy="93" r="11" fill="#0B0C0E" />
66
      <circle cx="138" cy="93" r="11" fill="#0B0C0E" />
67
      <circle cx="106" cy="88.5" r="3.2" fill="#F2EFE9" />
68
      <circle cx="142" cy="88.5" r="3.2" fill="#F2EFE9" />
69
      <circle cx="99" cy="90" r="25" fill="none" stroke="#E0A53B" strokeWidth="5" />
70
      <circle cx="141" cy="90" r="25" fill="none" stroke="#E0A53B" strokeWidth="5" />
71
      <path d="M115 89 Q120 81 125 89" fill="none" stroke="#E0A53B" strokeWidth="4.2" strokeLinecap="round" />
72
      <path d="M120 100 L111 110 L120 121 L129 110 Z" fill="#C9A66B" />
73
      <path d="M77 62 Q90 54 105 58" stroke="#F2EFE9" strokeWidth="3.6" strokeLinecap="round" fill="none" opacity="0.85" />
74
      <path d="M163 62 Q150 54 135 58" stroke="#F2EFE9" strokeWidth="3.6" strokeLinecap="round" fill="none" opacity="0.85" />
75
      <g stroke="#C9A66B" strokeWidth="4" strokeLinecap="round" fill="none">
76
        <path d="M104 182 L100 192 M104 182 L106 193 M104 182 L112 191" />
77
        <path d="M136 182 L128 191 M136 182 L134 193 M136 182 L140 192" />
78
      </g>
79
      <rect x="62" y="190" width="116" height="30" rx="5" fill="#3A4049" />
80
      <rect x="62" y="190" width="12" height="30" rx="5" fill="#E0A53B" />
81
      <line x1="84" y1="212" x2="170" y2="212" stroke="#F2EFE9" strokeWidth="2.6" strokeLinecap="round" opacity="0.5" />
82
      <line x1="84" y1="216.5" x2="170" y2="216.5" stroke="#F2EFE9" strokeWidth="2" strokeLinecap="round" opacity="0.3" />
83
    </svg>
84
  );
85
}
86
87
export function OwlAlt({ size = 200, className, title = "Docket owl searching the record" }: OwlProps) {
88
  return (
89
    <svg
90
      width={size}
91
      height={size}
92
      viewBox="0 0 240 240"
93
      className={className}
94
      role="img"
95
      aria-label={title}
96
      xmlns="http://www.w3.org/2000/svg"
97
    >
98
      <circle cx="178" cy="70" r="30" fill="#121316" stroke="#E0A53B" strokeWidth="7" />
99
      <line x1="200" y1="92" x2="218" y2="112" stroke="#E0A53B" strokeWidth="9" strokeLinecap="round" />
100
      <path d="M72 70 Q76 36 102 62 Q89 65 81 72 Z" fill="#2A2E35" />
101
      <path d="M136 70 Q132 36 106 62 Q119 65 127 72 Z" fill="#2A2E35" />
102
      <ellipse cx="104" cy="128" rx="58" ry="74" fill="#2A2E35" />
103
      <ellipse cx="104" cy="150" rx="38" ry="46" fill="#363B44" />
104
      <path d="M150 132 Q176 110 186 92 Q172 118 150 120 Z" fill="#22262D" />
105
      <path d="M52 108 Q40 150 56 196 Q50 154 62 116 Z" fill="#22262D" />
106
      <circle cx="86" cy="104" r="33" fill="#3A4049" />
107
      <circle cx="122" cy="104" r="33" fill="#3A4049" />
108
      <path d="M62 93 L49 88" stroke="#E0A53B" strokeWidth="4" strokeLinecap="round" fill="none" />
109
      <path d="M146 93 L159 88" stroke="#E0A53B" strokeWidth="4" strokeLinecap="round" fill="none" />
110
      <circle cx="85" cy="102" r="21" fill="#F2EFE9" />
111
      <circle cx="123" cy="102" r="21" fill="#F2EFE9" />
112
      <circle cx="88" cy="105" r="10.5" fill="#0B0C0E" />
113
      <circle cx="120" cy="105" r="10.5" fill="#0B0C0E" />
114
      <circle cx="91.5" cy="100.5" r="3" fill="#F2EFE9" />
115
      <circle cx="123.5" cy="100.5" r="3" fill="#F2EFE9" />
116
      <circle cx="85" cy="102" r="24" fill="none" stroke="#E0A53B" strokeWidth="4.8" />
117
      <circle cx="123" cy="102" r="24" fill="none" stroke="#E0A53B" strokeWidth="4.8" />
118
      <path d="M100 101 Q104 93 109 101" fill="none" stroke="#E0A53B" strokeWidth="4" strokeLinecap="round" />
119
      <path d="M104 111 L95.5 121 L104 131 L112.5 121 Z" fill="#C9A66B" />
120
      <path d="M64 76 Q76 68 90 72" stroke="#F2EFE9" strokeWidth="3.4" strokeLinecap="round" fill="none" opacity="0.85" />
121
      <path d="M144 76 Q132 68 118 72" stroke="#F2EFE9" strokeWidth="3.4" strokeLinecap="round" fill="none" opacity="0.85" />
122
      <g stroke="#C9A66B" strokeWidth="4" strokeLinecap="round" fill="none">
123
        <path d="M88 198 L84 208 M88 198 L90 209 M88 198 L96 207" />
124
        <path d="M120 198 L112 207 M120 198 L118 209 M120 198 L124 208" />
125
      </g>
126
      <line x1="60" y1="210" x2="148" y2="210" stroke="#F2EFE9" strokeWidth="3" strokeLinecap="round" opacity="0.4" />
127
    </svg>
128
  );
129
}