diff options
Diffstat (limited to 'frontend/src/components/OrigamiDragonLogo.tsx')
| -rw-r--r-- | frontend/src/components/OrigamiDragonLogo.tsx | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/frontend/src/components/OrigamiDragonLogo.tsx b/frontend/src/components/OrigamiDragonLogo.tsx new file mode 100644 index 0000000..6a7a5fb --- /dev/null +++ b/frontend/src/components/OrigamiDragonLogo.tsx @@ -0,0 +1,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 |