ontoref/assets/save/a.svg

<svg width="600" height="700" viewBox="0 0 600 700" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!--
    Regular octagon: R=195, center=(300,270)
    Vertices at -90° + i*45°:
    V0(300,75) V1(438,132) V2(495,270) V3(438,408)
    V4(300,465) V5(162,408) V6(105,270) V7(162,132)

    Yin/yang S-curve divides the octagon into two flowing regions.
    Silver (Ref/structure) contains a small amber seed.
    Amber (Onto/graph) contains a small silver seed.
  -->
  <defs>
    <linearGradient id="sG" x1="0" y1="0" x2="0.5" y2="1">
      <stop offset="0%" stop-color="#E8EDF2"/>
      <stop offset="50%" stop-color="#C0CAD4"/>
      <stop offset="100%" stop-color="#8494A6"/>
    </linearGradient>
    <linearGradient id="aG" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F5C44A"/>
      <stop offset="100%" stop-color="#D48A10"/>
    </linearGradient>
    <linearGradient id="aGflat" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#F0B830"/>
      <stop offset="100%" stop-color="#C87808"/>
    </linearGradient>

    <!-- S-curve yin/yang division -->
    <!-- Silver region: top → S-curve → bottom → left octagon edges -->
    <clipPath id="silverClip">
      <path d="M300,75 C400,190 200,350 300,465 L162,408 L105,270 L162,132 Z"/>
    </clipPath>
    <!-- Amber region: top → S-curve → bottom → right octagon edges -->
    <clipPath id="amberClip">
      <path d="M300,75 C400,190 200,350 300,465 L438,408 L495,270 L438,132 Z"/>
    </clipPath>
    <!-- Full octagon clip -->
    <clipPath id="octClip">
      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"/>
    </clipPath>

    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="4" result="b"/>
      <feFlood flood-color="#E8A838" flood-opacity=".1"/>
      <feComposite in2="b" operator="in" result="g"/>
      <feComposite in="SourceGraphic" in2="g" operator="over"/>
    </filter>
    <filter id="nSh">
      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#D48A10" flood-opacity=".25"/>
    </filter>
    <filter id="sSh">
      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity=".15"/>
    </filter>
    <filter id="sCurveGlow">
      <feGaussianBlur stdDeviation="3" result="b"/>
      <feComposite in="SourceGraphic" in2="b" operator="over"/>
    </filter>
  </defs>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
    @keyframes bp{0%,100%{opacity:var(--o,.8)}50%{opacity:calc(var(--o,.8) + .08)}}
    @keyframes nFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
    @keyframes nPulse{0%,100%{r:var(--r,16)}50%{r:calc(var(--r,16) + 1.5)}}
    @keyframes drawE{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
    @keyframes eBreathe{0%,100%{opacity:.5}50%{opacity:.88}}
    @keyframes aPulse{0%,100%{opacity:.4}50%{opacity:.9}}
    @keyframes seedPulse{0%,100%{opacity:.5;r:var(--sr,8)}50%{opacity:.75;r:calc(var(--sr,8) + 1)}}
    @keyframes seedBlockPulse{0%,100%{opacity:.35}50%{opacity:.55}}
    @keyframes floatAll{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    @keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes sCurveFlow{0%,100%{stroke-opacity:.08}50%{stroke-opacity:.16}}
    @keyframes ringPulse{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.07}}
    .bp{animation:bp 4.5s ease-in-out infinite}
    .nf{animation:nFloat 5s ease-in-out infinite}
    .np{animation:nPulse 3.5s ease-in-out infinite}
    .de{stroke-dasharray:200;animation:drawE 1.8s ease-out forwards,eBreathe 4s ease-in-out 2s infinite}
    .ap{animation:aPulse 3s ease-in-out infinite}
    .sp{animation:seedPulse 4s ease-in-out infinite}
    .sbp{animation:seedBlockPulse 4s ease-in-out infinite}
    .fal{animation:floatAll 7s ease-in-out infinite}
    .fi{animation:fadeIn 1s ease-out .5s both}
    .scf{animation:sCurveFlow 5s ease-in-out infinite}
    .rp{animation:ringPulse 7s ease-in-out infinite}
  </style>

  <rect width="600" height="700" fill="#0F1319"/>

  <!-- Outer decorative octagon ring -->
  <path class="rp" d="M300,55 L448,117 L510,270 L448,423 L300,485 L152,423 L90,270 L152,117 Z"
    fill="none" stroke="#E8A838" stroke-width="1" stroke-opacity=".04"/>

  <g class="fal">
    <!-- Octagon outline -->
    <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
      fill="none" stroke="rgba(255,255,255,.06)" stroke-width="1.5"/>

    <!-- ═══ SILVER REGION (Ref / Structure) ═══ -->
    <g clip-path="url(#silverClip)">
      <!-- Fill -->
      <path d="M300,75 L162,132 L105,270 L162,408 L300,465 C200,350 400,190 300,75Z" fill="url(#sG)" opacity=".92"/>

      <!-- Grid blocks (arranged within the silver flowing shape) -->
      <!-- Upper cluster (wider part of silver) -->
      <rect class="bp" x="135" y="168" width="52" height="40" rx="4" fill="#0F1319" opacity=".78" style="--o:.78"/>
      <rect class="bp" x="197" y="168" width="52" height="40" rx="4" fill="#0F1319" opacity=".74" style="--o:.74;animation-delay:.2s"/>
      <rect class="bp" x="130" y="222" width="56" height="46" rx="4" fill="#0F1319" opacity=".7" style="--o:.7;animation-delay:.35s"/>
      <rect class="bp" x="196" y="222" width="48" height="46" rx="4" fill="#0F1319" opacity=".65" style="--o:.65;animation-delay:.5s"/>
      <!-- Lower cluster (narrowing toward S-curve) -->
      <rect class="bp" x="128" y="282" width="54" height="42" rx="4" fill="#0F1319" opacity=".58" style="--o:.58;animation-delay:.65s"/>
      <rect class="bp" x="135" y="338" width="46" height="36" rx="4" fill="#0F1319" opacity=".48" style="--o:.48;animation-delay:.8s"/>

      <!-- ★ SEED: small amber circle within silver (the seed of Onto in Ref) -->
      <circle class="sp" cx="200" cy="380" r="10" fill="url(#aG)" style="--sr:10" opacity=".55"/>
    </g>

    <!-- ═══ AMBER REGION (Onto / Graph) ═══ -->
    <g clip-path="url(#amberClip)">
      <!-- Fill -->
      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 C200,350 400,190 300,75Z" fill="url(#aGflat)" opacity=".88"/>

      <!-- DAG within amber region -->
      <!--
        Proper DAG (top→bottom, no cycles):
          A (root)
         / \
        B   C
         \ /
          D
          |
          E
      -->
      <g filter="url(#glow)">
        <!-- Edges -->
        <line class="de" x1="390" y1="160" x2="350" y2="232" stroke="#0F1319" stroke-width="4.5" stroke-linecap="round" opacity=".5" style="animation-delay:.15s"/>
        <line class="de" x1="390" y1="160" x2="435" y2="232" stroke="#0F1319" stroke-width="4.5" stroke-linecap="round" opacity=".5" style="animation-delay:.35s"/>
        <line class="de" x1="350" y1="248" x2="395" y2="310" stroke="#0F1319" stroke-width="4" stroke-linecap="round" opacity=".45" style="animation-delay:.6s"/>
        <line class="de" x1="435" y1="248" x2="395" y2="310" stroke="#0F1319" stroke-width="4" stroke-linecap="round" opacity=".45" style="animation-delay:.8s"/>
        <line class="de" x1="395" y1="326" x2="380" y2="385" stroke="#0F1319" stroke-width="3.5" stroke-linecap="round" opacity=".4" style="animation-delay:1.05s"/>
        <!-- Arrowheads -->
        <polygon class="ap" points="344,224 352,236 358,226" fill="#0F1319" opacity=".5" style="animation-delay:.15s"/>
        <polygon class="ap" points="429,224 437,236 443,224" fill="#0F1319" opacity=".5" style="animation-delay:.35s"/>
        <polygon class="ap" points="389,303 397,315 403,303" fill="#0F1319" opacity=".45" style="animation-delay:.6s"/>
        <polygon class="ap" points="374,378 382,390 388,378" fill="#0F1319" opacity=".4" style="animation-delay:1.05s"/>
      </g>

      <!-- DAG Nodes (dark on amber for contrast) -->
      <g filter="url(#sSh)">
        <g class="nf" style="animation-delay:0s">
          <circle class="np" cx="390" cy="152" r="18" fill="#0F1319" opacity=".7" style="--r:18"/>
        </g>
        <g class="nf" style="animation-delay:.3s">
          <circle class="np" cx="350" cy="240" r="15" fill="#0F1319" opacity=".6" style="--r:15"/>
        </g>
        <g class="nf" style="animation-delay:.5s">
          <circle class="np" cx="435" cy="240" r="15" fill="#0F1319" opacity=".6" style="--r:15"/>
        </g>
        <g class="nf" style="animation-delay:.8s">
          <circle class="np" cx="395" cy="318" r="16" fill="#0F1319" opacity=".65" style="--r:16"/>
        </g>
        <g class="nf" style="animation-delay:1.1s">
          <circle class="np" cx="380" cy="392" r="13" fill="#0F1319" opacity=".55" style="--r:13"/>
        </g>
      </g>

      <!-- ★ SEED: small silver square within amber (the seed of Ref in Onto) -->
      <rect class="sbp" x="388" y="136" width="14" height="14" rx="2.5" fill="#C0CCD8" opacity=".4"
        transform="rotate(0,395,143)"/>
    </g>

    <!-- S-CURVE dividing line (visible, subtle glow) -->
    <path class="scf" d="M300,75 C400,190 200,350 300,465"
      fill="none" stroke="rgba(255,255,255,.08)" stroke-width="2" filter="url(#sCurveGlow)"/>
  </g>

  <!-- Wordmark -->
  <g class="fi">
    <text x="300" y="540" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="52" font-weight="600" letter-spacing=".03em">
      <tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">Ref</tspan>
    </text>
    <text x="300" y="574" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="16" font-weight="300" fill="#6E7A88" letter-spacing=".03em" opacity=".6">
      Structure that remembers why.
    </text>
  </g>
</svg>