1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
import React from 'react'
type Variant = 'mark' | 'ribbonS' | 'badge' | 'crane' | 'craneOutline'
type Props = {
variant?: Variant
height?: number
color?: string
className?: string
title?: string
strokeWidth?: number
}
/**
* Origami-style dragon logo for small header placement.
* - Uses currentColor by default so it adapts to surrounding text color.
* - Keep height around 20–24px in compact headers.
*/
export const OrigamiDragonLogo: React.FC<Props> = ({
variant = 'crane',
height = 20,
color = 'currentColor',
className = '',
title = 'Soryu logo',
strokeWidth = 12,
}) => {
if (variant === 'craneOutline') {
// Outline rendition inspired by provided licensed crane icon
return (
<svg
className={className}
role="img"
aria-label={title}
width={height}
height={height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
style={{ display: 'inline-block', verticalAlign: 'middle', color }}
>
<title>{title}</title>
<g fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round">
{/* Left tail → left wing base → body pivot */}
<path d="M10 60 L36 76 L18 42 L42 58" />
{/* Left wing upstroke */}
<path d="M42 58 L26 12" />
{/* Left wing inner crease to pivot */}
<path d="M26 12 L50 62" />
{/* Body lower crease */}
<path d="M30 76 L50 62" />
{/* Center mast (rear triangle) */}
<path d="M50 62 L58 16 L64 70" />
{/* Right wing outer edge */}
<path d="M50 62 L72 30 L66 78" />
{/* Right wing inner crease */}
<path d="M72 30 L60 52" />
{/* Neck and head */}
<path d="M66 78 L82 54 L90 40 L96 56" />
{/* Neck inner crease */}
<path d="M82 54 L72 44" />
</g>
</svg>
)
}
if (variant === 'crane') {
// Origami crane silhouette with a dragon head
return (
<svg
className={className}
role="img"
aria-label={title}
width={height}
height={height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
style={{ display: 'inline-block', verticalAlign: 'middle', color }}
>
<title>{title}</title>
{/* Left/up wing */}
<polygon points="46,48 22,24 40,52" fill="currentColor" opacity="0.95" />
{/* Right/down wing */}
<polygon points="52,52 78,76 58,54" fill="currentColor" opacity="0.78" />
{/* Body (diamond) */}
<polygon points="44,52 52,46 58,52 50,60" fill="currentColor" opacity="0.88" />
{/* Tail */}
<polygon points="44,60 34,70 46,64" fill="currentColor" opacity="0.7" />
{/* Neck */}
<polygon points="58,46 76,40 74,44 56,50" fill="currentColor" opacity="0.9" />
{/* Dragon head (top plane) */}
<polygon points="76,40 90,38 82,46" fill="currentColor" opacity="0.95" />
{/* Dragon jaw plane */}
<polygon points="74,44 90,46 82,50" fill="currentColor" opacity="0.8" />
{/* Small horn */}
<polygon points="86,36 92,38 88,42" fill="currentColor" opacity="0.85" />
</svg>
)
}
if (variant === 'mark') {
// Angular origami dragon head/neck, faceted into simple planes
return (
<svg
className={className}
role="img"
aria-label={title}
width={height}
height={height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
style={{ display: 'inline-block', verticalAlign: 'middle', color }}
>
<title>{title}</title>
{/* Upper head */}
<polygon points="60,22 86,16 73,34 58,30" fill="currentColor" opacity="0.95" />
{/* Snout / jaw plane */}
<polygon points="58,30 73,34 90,30 71,45" fill="currentColor" opacity="0.8" />
{/* Neck planes */}
<polygon points="58,30 71,45 56,60 40,66 30,72 22,64 46,48" fill="currentColor" opacity="0.9" />
<polygon points="22,64 30,72 18,74 26,60" fill="currentColor" opacity="0.65" />
{/* Small ear/horn suggestion */}
<polygon points="78,18 86,16 82,24" fill="currentColor" opacity="0.7" />
</svg>
)
}
if (variant === 'ribbonS') {
// Folded ribbon forming an angular "S" silhouette
return (
<svg
className={className}
role="img"
aria-label={title}
width={height}
height={height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
style={{ display: 'inline-block', verticalAlign: 'middle', color }}
>
<title>{title}</title>
{/* Top fold */}
<polygon points="22,32 62,18 70,26 30,40" fill="currentColor" opacity="0.95" />
{/* Middle fold (turning back) */}
<polygon points="30,40 70,26 60,46 20,60" fill="currentColor" opacity="0.8" />
{/* Lower fold */}
<polygon points="22,64 60,46 68,54 28,70" fill="currentColor" opacity="0.9" />
</svg>
)
}
// badge
return (
<svg
className={className}
role="img"
aria-label={title}
width={height}
height={height}
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
style={{ display: 'inline-block', verticalAlign: 'middle', color }}
>
<title>{title}</title>
{/* Hex container */}
<polygon
points="50,6 83,25 83,75 50,94 17,75 17,25"
fill="none"
stroke="currentColor"
strokeWidth="8"
strokeLinejoin="round"
opacity="0.9"
/>
{/* Mini mark inside */}
<g transform="translate(0,2) scale(0.85) translate(10,6)">
<polygon points="60,22 86,16 73,34 58,30" fill="currentColor" opacity="0.95" />
<polygon points="58,30 73,34 90,30 71,45" fill="currentColor" opacity="0.8" />
<polygon points="58,30 71,45 56,60 40,66 30,72 22,64 46,48" fill="currentColor" opacity="0.9" />
</g>
</svg>
)
}
export default OrigamiDragonLogo
|
