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
