From 3e7b2beca1136a42700a7e1aebfe4c0fb2861a00 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 15 Nov 2025 18:00:09 +0000
Subject: Initial commit

---
 frontend/src/components/OrigamiDragonLogo.tsx | 180 ++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 frontend/src/components/OrigamiDragonLogo.tsx

(limited to 'frontend/src/components/OrigamiDragonLogo.tsx')

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
-- 
cgit v1.2.3