Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>mirror. logo — v3</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #0f1117; | |
| color: #f0eeff; | |
| font-family: -apple-system, system-ui, sans-serif; | |
| padding: 48px 40px; | |
| } | |
| h2 { | |
| font-size: 10px; | |
| letter-spacing: 2.5px; | |
| text-transform: uppercase; | |
| color: #3a3a52; | |
| margin-bottom: 32px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid #1e2438; | |
| } | |
| .section { margin-bottom: 64px; } | |
| .row { display: flex; gap: 56px; flex-wrap: wrap; } | |
| .option { display: flex; flex-direction: column; } | |
| .option-label { | |
| font-size: 10px; | |
| color: #4a4865; | |
| letter-spacing: 1.2px; | |
| text-transform: uppercase; | |
| margin-bottom: 20px; | |
| } | |
| .sizes { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| margin-bottom: 20px; | |
| } | |
| .wordmark { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 12px 16px; | |
| background: #151922; | |
| border: 1px solid #1e2438; | |
| border-radius: 8px; | |
| width: fit-content; | |
| } | |
| .wm-text { | |
| font-size: 17px; | |
| font-weight: 700; | |
| color: #f0eeff; | |
| letter-spacing: -0.5px; | |
| font-family: -apple-system, system-ui, sans-serif; | |
| } | |
| .wm-dot { color: #1d4ed8; } | |
| </style> | |
| </head> | |
| <body> | |
| <p style="font-size:13px; font-weight:600; color:#f0eeff; margin-bottom:6px; letter-spacing:-0.3px">mirror. logo explorations — v3</p> | |
| <p style="font-size:12px; color:#4a4865; margin-bottom:56px">Directions 2 · 3 · 4 — sizes shown: 16 · 32 · 52px</p> | |
| <!-- ═══════════════════ DIRECTION 2 ═══════════════════ --> | |
| <div class="section"> | |
| <h2>2 — Reflection / Symmetry</h2> | |
| <div class="row"> | |
| <!-- 2A: Waveform mirrored top/bottom --> | |
| <div class="option"> | |
| <div class="option-label">2A — Waveform mirror</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="ga_16" x1="0" y1="0" x2="16" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="1" y="6" width="2" height="2" rx="1" fill="url(#ga_16)" opacity=".4"/> | |
| <rect x="4" y="4" width="2" height="4" rx="1" fill="url(#ga_16)" opacity=".65"/> | |
| <rect x="7" y="2" width="2" height="6" rx="1" fill="url(#ga_16)"/> | |
| <rect x="10" y="4" width="2" height="4" rx="1" fill="url(#ga_16)" opacity=".65"/> | |
| <rect x="13" y="6" width="2" height="2" rx="1" fill="url(#ga_16)" opacity=".4"/> | |
| <line x1="0" y1="9" x2="16" y2="9" stroke="#1e2438" stroke-width=".75"/> | |
| <rect x="1" y="9" width="2" height="2" rx="1" fill="url(#ga_16)" opacity=".18"/> | |
| <rect x="4" y="9" width="2" height="4" rx="1" fill="url(#ga_16)" opacity=".3"/> | |
| <rect x="7" y="9" width="2" height="6" rx="1" fill="url(#ga_16)" opacity=".38"/> | |
| <rect x="10" y="9" width="2" height="4" rx="1" fill="url(#ga_16)" opacity=".3"/> | |
| <rect x="13" y="9" width="2" height="2" rx="1" fill="url(#ga_16)" opacity=".18"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="ga_32" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="12" width="4" height="4" rx="2" fill="url(#ga_32)" opacity=".4"/> | |
| <rect x="8" y="8" width="4" height="8" rx="2" fill="url(#ga_32)" opacity=".65"/> | |
| <rect x="14" y="4" width="4" height="12" rx="2" fill="url(#ga_32)"/> | |
| <rect x="20" y="8" width="4" height="8" rx="2" fill="url(#ga_32)" opacity=".65"/> | |
| <rect x="26" y="12" width="4" height="4" rx="2" fill="url(#ga_32)" opacity=".4"/> | |
| <line x1="0" y1="17.5" x2="32" y2="17.5" stroke="#1e2438" stroke-width="1"/> | |
| <rect x="2" y="18" width="4" height="4" rx="2" fill="url(#ga_32)" opacity=".18"/> | |
| <rect x="8" y="18" width="4" height="8" rx="2" fill="url(#ga_32)" opacity=".3"/> | |
| <rect x="14" y="18" width="4" height="12" rx="2" fill="url(#ga_32)" opacity=".38"/> | |
| <rect x="20" y="18" width="4" height="8" rx="2" fill="url(#ga_32)" opacity=".3"/> | |
| <rect x="26" y="18" width="4" height="4" rx="2" fill="url(#ga_32)" opacity=".18"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="ga_52" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="20" width="6" height="6" rx="3" fill="url(#ga_52)" opacity=".35"/> | |
| <rect x="11" y="13" width="6" height="13" rx="3" fill="url(#ga_52)" opacity=".6"/> | |
| <rect x="20" y="6" width="8" height="20" rx="4" fill="url(#ga_52)"/> | |
| <rect x="31" y="13" width="6" height="13" rx="3" fill="url(#ga_52)" opacity=".6"/> | |
| <rect x="40" y="20" width="6" height="6" rx="3" fill="url(#ga_52)" opacity=".35"/> | |
| <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" stroke-width="1.25"/> | |
| <rect x="2" y="29" width="6" height="6" rx="3" fill="url(#ga_52)" opacity=".15"/> | |
| <rect x="11" y="29" width="6" height="13" rx="3" fill="url(#ga_52)" opacity=".27"/> | |
| <rect x="20" y="29" width="8" height="20" rx="4" fill="url(#ga_52)" opacity=".33"/> | |
| <rect x="31" y="29" width="6" height="13" rx="3" fill="url(#ga_52)" opacity=".27"/> | |
| <rect x="40" y="29" width="6" height="6" rx="3" fill="url(#ga_52)" opacity=".15"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="ga_wm" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="20" width="6" height="6" rx="3" fill="url(#ga_wm)" opacity=".35"/> | |
| <rect x="11" y="13" width="6" height="13" rx="3" fill="url(#ga_wm)" opacity=".6"/> | |
| <rect x="20" y="6" width="8" height="20" rx="4" fill="url(#ga_wm)"/> | |
| <rect x="31" y="13" width="6" height="13" rx="3" fill="url(#ga_wm)" opacity=".6"/> | |
| <rect x="40" y="20" width="6" height="6" rx="3" fill="url(#ga_wm)" opacity=".35"/> | |
| <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" stroke-width="1.25"/> | |
| <rect x="2" y="29" width="6" height="6" rx="3" fill="url(#ga_wm)" opacity=".15"/> | |
| <rect x="11" y="29" width="6" height="13" rx="3" fill="url(#ga_wm)" opacity=".27"/> | |
| <rect x="20" y="29" width="8" height="20" rx="4" fill="url(#ga_wm)" opacity=".33"/> | |
| <rect x="31" y="29" width="6" height="13" rx="3" fill="url(#ga_wm)" opacity=".27"/> | |
| <rect x="40" y="29" width="6" height="6" rx="3" fill="url(#ga_wm)" opacity=".15"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 2B: Two arcs facing each other with center dot --> | |
| <div class="option"> | |
| <div class="option-label">2B — Arc reflection</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gb_16" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M2 8 Q8 2 14 8" stroke="url(#gb_16)" stroke-width="1.75" fill="none" stroke-linecap="round"/> | |
| <path d="M2 8 Q8 14 14 8" stroke="url(#gb_16)" stroke-width="1.75" fill="none" stroke-linecap="round" opacity=".4"/> | |
| <circle cx="8" cy="8" r="1.5" fill="url(#gb_16)"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gb_32" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M3 16 Q16 4 29 16" stroke="url(#gb_32)" stroke-width="2.5" fill="none" stroke-linecap="round"/> | |
| <path d="M3 16 Q16 28 29 16" stroke="url(#gb_32)" stroke-width="2.5" fill="none" stroke-linecap="round" opacity=".4"/> | |
| <circle cx="16" cy="16" r="3" fill="url(#gb_32)"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gb_52" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M4 26 Q26 6 48 26" stroke="url(#gb_52)" stroke-width="3" fill="none" stroke-linecap="round"/> | |
| <path d="M4 26 Q26 46 48 26" stroke="url(#gb_52)" stroke-width="3" fill="none" stroke-linecap="round" opacity=".4"/> | |
| <circle cx="26" cy="26" r="5" fill="url(#gb_52)"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gb_wm" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M4 26 Q26 6 48 26" stroke="url(#gb_wm)" stroke-width="3" fill="none" stroke-linecap="round"/> | |
| <path d="M4 26 Q26 46 48 26" stroke="url(#gb_wm)" stroke-width="3" fill="none" stroke-linecap="round" opacity=".4"/> | |
| <circle cx="26" cy="26" r="5" fill="url(#gb_wm)"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 2C: Shape on water — solid peak + faded reflection below --> | |
| <div class="option"> | |
| <div class="option-label">2C — Shape on water</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gc_16" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M8 2 L2 8 L14 8 Z" fill="url(#gc_16)"/> | |
| <line x1="1" y1="9.5" x2="15" y2="9.5" stroke="#1e2438" stroke-width=".75"/> | |
| <path d="M8 15 L2 10 L14 10 Z" fill="url(#gc_16)" opacity=".22"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gc_32" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M16 3 L3 16 L29 16 Z" fill="url(#gc_32)"/> | |
| <line x1="1" y1="18.5" x2="31" y2="18.5" stroke="#1e2438" stroke-width="1"/> | |
| <path d="M16 30 L3 19 L29 19 Z" fill="url(#gc_32)" opacity=".2"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gc_52" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M26 5 L4 26 L48 26 Z" fill="url(#gc_52)"/> | |
| <line x1="2" y1="29.5" x2="50" y2="29.5" stroke="#1e2438" stroke-width="1.25"/> | |
| <path d="M26 48 L4 30 L48 30 Z" fill="url(#gc_52)" opacity=".18"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gc_wm" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M26 5 L4 26 L48 26 Z" fill="url(#gc_wm)"/> | |
| <line x1="2" y1="29.5" x2="50" y2="29.5" stroke="#1e2438" stroke-width="1.25"/> | |
| <path d="M26 48 L4 30 L48 30 Z" fill="url(#gc_wm)" opacity=".18"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════════ DIRECTION 3 ═══════════════════ --> | |
| <div class="section"> | |
| <h2>3 — Duality</h2> | |
| <div class="row"> | |
| <!-- 3A: Two offset circles (perceived vs actual) --> | |
| <div class="option"> | |
| <div class="option-label">3A — Perceived vs actual</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gd_16" x1="0" y1="0" x2="16" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="7" cy="8" r="5" stroke="#1d4ed8" stroke-width="1.25" fill="none" opacity=".38"/> | |
| <circle cx="10" cy="8" r="5" fill="url(#gd_16)" opacity=".18"/> | |
| <circle cx="10" cy="8" r="5" stroke="url(#gd_16)" stroke-width="1.25" fill="none"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gd_32" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="13" cy="16" r="9.5" stroke="#1d4ed8" stroke-width="1.5" fill="none" opacity=".35"/> | |
| <circle cx="19" cy="16" r="9.5" fill="url(#gd_32)" opacity=".14"/> | |
| <circle cx="19" cy="16" r="9.5" stroke="url(#gd_32)" stroke-width="1.5" fill="none"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gd_52" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="21" cy="26" r="16" stroke="#1d4ed8" stroke-width="2" fill="none" opacity=".3"/> | |
| <circle cx="31" cy="26" r="16" fill="url(#gd_52)" opacity=".12"/> | |
| <circle cx="31" cy="26" r="16" stroke="url(#gd_52)" stroke-width="2" fill="none"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gd_wm" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="21" cy="26" r="16" stroke="#1d4ed8" stroke-width="2" fill="none" opacity=".3"/> | |
| <circle cx="31" cy="26" r="16" fill="url(#gd_wm)" opacity=".12"/> | |
| <circle cx="31" cy="26" r="16" stroke="url(#gd_wm)" stroke-width="2" fill="none"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 3B: Solid block + offset ghost outline --> | |
| <div class="option"> | |
| <div class="option-label">3B — Solid + ghost</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="ge_16" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="2" y="5" width="9" height="9" rx="2.5" fill="url(#ge_16)"/> | |
| <rect x="5" y="2" width="9" height="9" rx="2.5" stroke="url(#ge_16)" stroke-width="1.25" fill="none" opacity=".35"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="ge_32" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="4" y="10" width="17" height="17" rx="4.5" fill="url(#ge_32)"/> | |
| <rect x="11" y="4" width="17" height="17" rx="4.5" stroke="url(#ge_32)" stroke-width="2" fill="none" opacity=".32"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="ge_52" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="5" y="17" width="28" height="28" rx="7" fill="url(#ge_52)"/> | |
| <rect x="19" y="6" width="28" height="28" rx="7" stroke="url(#ge_52)" stroke-width="2.5" fill="none" opacity=".28"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="ge_wm" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="5" y="17" width="28" height="28" rx="7" fill="url(#ge_wm)"/> | |
| <rect x="19" y="6" width="28" height="28" rx="7" stroke="url(#ge_wm)" stroke-width="2.5" fill="none" opacity=".28"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 3C: Left half filled, right half outline --> | |
| <div class="option"> | |
| <div class="option-label">3C — Two halves</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gf_16" x1="0" y1="0" x2="16" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| <clipPath id="clip_fl"><rect x="0" y="0" width="8" height="16"/></clipPath> | |
| <clipPath id="clip_fr"><rect x="8" y="0" width="8" height="16"/></clipPath> | |
| </defs> | |
| <circle cx="8" cy="8" r="6" fill="url(#gf_16)" clip-path="url(#clip_fl)"/> | |
| <circle cx="8" cy="8" r="6" stroke="url(#gf_16)" stroke-width="1.5" fill="none" clip-path="url(#clip_fr)" opacity=".42"/> | |
| <line x1="8" y1="2" x2="8" y2="14" stroke="url(#gf_16)" stroke-width=".75" opacity=".45"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gf_32" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| <clipPath id="clip_f32l"><rect x="0" y="0" width="16" height="32"/></clipPath> | |
| <clipPath id="clip_f32r"><rect x="16" y="0" width="16" height="32"/></clipPath> | |
| </defs> | |
| <circle cx="16" cy="16" r="12" fill="url(#gf_32)" clip-path="url(#clip_f32l)"/> | |
| <circle cx="16" cy="16" r="12" stroke="url(#gf_32)" stroke-width="2" fill="none" clip-path="url(#clip_f32r)" opacity=".38"/> | |
| <line x1="16" y1="4" x2="16" y2="28" stroke="url(#gf_32)" stroke-width="1" opacity=".4"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gf_52" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| <clipPath id="clip_f52l"><rect x="0" y="0" width="26" height="52"/></clipPath> | |
| <clipPath id="clip_f52r"><rect x="26" y="0" width="26" height="52"/></clipPath> | |
| </defs> | |
| <circle cx="26" cy="26" r="22" fill="url(#gf_52)" clip-path="url(#clip_f52l)"/> | |
| <circle cx="26" cy="26" r="22" stroke="url(#gf_52)" stroke-width="2.5" fill="none" clip-path="url(#clip_f52r)" opacity=".35"/> | |
| <line x1="26" y1="4" x2="26" y2="48" stroke="url(#gf_52)" stroke-width="1.25" opacity=".38"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gf_wm" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| <clipPath id="clip_fwml"><rect x="0" y="0" width="26" height="52"/></clipPath> | |
| <clipPath id="clip_fwmr"><rect x="26" y="0" width="26" height="52"/></clipPath> | |
| </defs> | |
| <circle cx="26" cy="26" r="22" fill="url(#gf_wm)" clip-path="url(#clip_fwml)"/> | |
| <circle cx="26" cy="26" r="22" stroke="url(#gf_wm)" stroke-width="2.5" fill="none" clip-path="url(#clip_fwmr)" opacity=".35"/> | |
| <line x1="26" y1="4" x2="26" y2="48" stroke="url(#gf_wm)" stroke-width="1.25" opacity=".38"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════════ DIRECTION 4 ═══════════════════ --> | |
| <div class="section"> | |
| <h2>4 — Single Resolving Mark</h2> | |
| <div class="row"> | |
| <!-- 4A: Three lines converging to a dot --> | |
| <div class="option"> | |
| <div class="option-label">4A — Convergence</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gg_16" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <line x1="2" y1="3" x2="8" y2="10" stroke="url(#gg_16)" stroke-width="1.5" stroke-linecap="round" opacity=".45"/> | |
| <line x1="8" y1="2" x2="8" y2="10" stroke="url(#gg_16)" stroke-width="1.5" stroke-linecap="round" opacity=".7"/> | |
| <line x1="14" y1="3" x2="8" y2="10" stroke="url(#gg_16)" stroke-width="1.5" stroke-linecap="round" opacity=".45"/> | |
| <circle cx="8" cy="11.5" r="2" fill="url(#gg_16)"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gg_32" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <line x1="4" y1="5" x2="16" y2="20" stroke="url(#gg_32)" stroke-width="2" stroke-linecap="round" opacity=".4"/> | |
| <line x1="16" y1="4" x2="16" y2="20" stroke="url(#gg_32)" stroke-width="2" stroke-linecap="round" opacity=".7"/> | |
| <line x1="28" y1="5" x2="16" y2="20" stroke="url(#gg_32)" stroke-width="2" stroke-linecap="round" opacity=".4"/> | |
| <circle cx="16" cy="23" r="4" fill="url(#gg_32)"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gg_52" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <line x1="5" y1="7" x2="26" y2="33" stroke="url(#gg_52)" stroke-width="2.5" stroke-linecap="round" opacity=".38"/> | |
| <line x1="26" y1="6" x2="26" y2="33" stroke="url(#gg_52)" stroke-width="2.5" stroke-linecap="round" opacity=".7"/> | |
| <line x1="47" y1="7" x2="26" y2="33" stroke="url(#gg_52)" stroke-width="2.5" stroke-linecap="round" opacity=".38"/> | |
| <circle cx="26" cy="38" r="6" fill="url(#gg_52)"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gg_wm" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <line x1="5" y1="7" x2="26" y2="33" stroke="url(#gg_wm)" stroke-width="2.5" stroke-linecap="round" opacity=".38"/> | |
| <line x1="26" y1="6" x2="26" y2="33" stroke="url(#gg_wm)" stroke-width="2.5" stroke-linecap="round" opacity=".7"/> | |
| <line x1="47" y1="7" x2="26" y2="33" stroke="url(#gg_wm)" stroke-width="2.5" stroke-linecap="round" opacity=".38"/> | |
| <circle cx="26" cy="38" r="6" fill="url(#gg_wm)"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 4B: Eye / lens shape with filled center --> | |
| <div class="option"> | |
| <div class="option-label">4B — Eye / clarity</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gh_16" x1="0" y1="0" x2="16" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M2 8 Q8 2 14 8 Q8 14 2 8Z" stroke="url(#gh_16)" stroke-width="1.25" fill="none"/> | |
| <circle cx="8" cy="8" r="2.5" fill="url(#gh_16)"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gh_32" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M3 16 Q16 5 29 16 Q16 27 3 16Z" stroke="url(#gh_32)" stroke-width="2" fill="none"/> | |
| <circle cx="16" cy="16" r="5" fill="url(#gh_32)"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gh_52" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M4 26 Q26 7 48 26 Q26 45 4 26Z" stroke="url(#gh_52)" stroke-width="2.5" fill="none"/> | |
| <circle cx="26" cy="26" r="8" fill="url(#gh_52)"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gh_wm" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M4 26 Q26 7 48 26 Q26 45 4 26Z" stroke="url(#gh_wm)" stroke-width="2.5" fill="none"/> | |
| <circle cx="26" cy="26" r="8" fill="url(#gh_wm)"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| <!-- 4C: Concentric rings collapsing to a dot --> | |
| <div class="option"> | |
| <div class="option-label">4C — Focus rings</div> | |
| <div class="sizes"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <defs> | |
| <linearGradient id="gi_16" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="8" cy="8" r="7" stroke="url(#gi_16)" stroke-width=".75" fill="none" opacity=".18"/> | |
| <circle cx="8" cy="8" r="5" stroke="url(#gi_16)" stroke-width=".75" fill="none" opacity=".35"/> | |
| <circle cx="8" cy="8" r="3" stroke="url(#gi_16)" stroke-width="1" fill="none" opacity=".62"/> | |
| <circle cx="8" cy="8" r="1.5" fill="url(#gi_16)"/> | |
| </svg> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <defs> | |
| <linearGradient id="gi_32" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="16" cy="16" r="14" stroke="url(#gi_32)" stroke-width="1" fill="none" opacity=".15"/> | |
| <circle cx="16" cy="16" r="10" stroke="url(#gi_32)" stroke-width="1.25" fill="none" opacity=".32"/> | |
| <circle cx="16" cy="16" r="6" stroke="url(#gi_32)" stroke-width="1.5" fill="none" opacity=".58"/> | |
| <circle cx="16" cy="16" r="3" fill="url(#gi_32)"/> | |
| </svg> | |
| <svg width="52" height="52" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gi_52" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="26" cy="26" r="24" stroke="url(#gi_52)" stroke-width="1" fill="none" opacity=".12"/> | |
| <circle cx="26" cy="26" r="17" stroke="url(#gi_52)" stroke-width="1.5" fill="none" opacity=".28"/> | |
| <circle cx="26" cy="26" r="10" stroke="url(#gi_52)" stroke-width="2" fill="none" opacity=".55"/> | |
| <circle cx="26" cy="26" r="5" fill="url(#gi_52)"/> | |
| </svg> | |
| </div> | |
| <div class="wordmark"> | |
| <svg width="24" height="24" viewBox="0 0 52 52" fill="none"> | |
| <defs> | |
| <linearGradient id="gi_wm" x1="0" y1="0" x2="52" y2="52" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#1d4ed8"/><stop offset="1" stop-color="#0891b2"/> | |
| </linearGradient> | |
| </defs> | |
| <circle cx="26" cy="26" r="24" stroke="url(#gi_wm)" stroke-width="1" fill="none" opacity=".12"/> | |
| <circle cx="26" cy="26" r="17" stroke="url(#gi_wm)" stroke-width="1.5" fill="none" opacity=".28"/> | |
| <circle cx="26" cy="26" r="10" stroke="url(#gi_wm)" stroke-width="2" fill="none" opacity=".55"/> | |
| <circle cx="26" cy="26" r="5" fill="url(#gi_wm)"/> | |
| </svg> | |
| <span class="wm-text">mirror<span class="wm-dot">.</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |