170 lines
8.9 KiB
XML
170 lines
8.9 KiB
XML
|
<svg width="600" height="700" viewBox="0 0 600 700" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<!-- Regular octagon R=195 center=(300,270) -->
|
||
|
|
<linearGradient id="sF" x1="0" y1="0" x2=".4" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#C8D4E0" stop-opacity=".18"/>
|
||
|
|
<stop offset="100%" stop-color="#8898A8" stop-opacity=".08"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="aF" x1=".5" y1="0" x2="1" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#F0B830" stop-opacity=".16"/>
|
||
|
|
<stop offset="100%" stop-color="#C87808" stop-opacity=".08"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="aN" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#F5C44A"/>
|
||
|
|
<stop offset="100%" stop-color="#DC9018"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<clipPath id="sClip2">
|
||
|
|
<path d="M300,75 C400,190 200,350 300,465 L162,408 L105,270 L162,132 Z"/>
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="aClip2">
|
||
|
|
<path d="M300,75 C400,190 200,350 300,465 L438,408 L495,270 L438,132 Z"/>
|
||
|
|
</clipPath>
|
||
|
|
|
||
|
|
<filter id="gl2" x="-20%" y="-20%" width="140%" height="140%">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="b"/>
|
||
|
|
<feFlood flood-color="#E8A838" flood-opacity=".12"/>
|
||
|
|
<feComposite in2="b" operator="in" result="g"/>
|
||
|
|
<feComposite in="SourceGraphic" in2="g" operator="over"/>
|
||
|
|
</filter>
|
||
|
|
<filter id="nSh2">
|
||
|
|
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#DC9018" flood-opacity=".3"/>
|
||
|
|
</filter>
|
||
|
|
<filter id="sGl">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="b"/>
|
||
|
|
<feFlood flood-color="#C8D4E0" flood-opacity=".1"/>
|
||
|
|
<feComposite in2="b" operator="in" result="g"/>
|
||
|
|
<feComposite in="SourceGraphic" in2="g" operator="over"/>
|
||
|
|
</filter>
|
||
|
|
<filter id="curveGlow2">
|
||
|
|
<feGaussianBlur stdDeviation="4" 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&display=swap');
|
||
|
|
@keyframes bp2{0%,100%{opacity:var(--o,.7)}50%{opacity:calc(var(--o,.7) + .12)}}
|
||
|
|
@keyframes nf2{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2.5px)}}
|
||
|
|
@keyframes np2{0%,100%{r:var(--r,16)}50%{r:calc(var(--r,16) + 2)}}
|
||
|
|
@keyframes de2{0%{stroke-dashoffset:220}100%{stroke-dashoffset:0}}
|
||
|
|
@keyframes eb2{0%,100%{opacity:.45}50%{opacity:.85}}
|
||
|
|
@keyframes ap2{0%,100%{opacity:.4}50%{opacity:.9}}
|
||
|
|
@keyframes seedA{0%,100%{opacity:.4;r:8}50%{opacity:.65;r:9.5}}
|
||
|
|
@keyframes seedS{0%,100%{opacity:.28}50%{opacity:.48}}
|
||
|
|
@keyframes fal2{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
||
|
|
@keyframes fi2{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||
|
|
@keyframes curveBreath{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
|
||
|
|
@keyframes ringP{0%,100%{stroke-opacity:.035}50%{stroke-opacity:.06}}
|
||
|
|
.bp2{animation:bp2 4.5s ease-in-out infinite}
|
||
|
|
.nf2{animation:nf2 5s ease-in-out infinite}
|
||
|
|
.np2{animation:np2 3.5s ease-in-out infinite}
|
||
|
|
.de2{stroke-dasharray:220;animation:de2 1.8s ease-out forwards,eb2 4s ease-in-out 2s infinite}
|
||
|
|
.ap2{animation:ap2 3s ease-in-out infinite}
|
||
|
|
.sA{animation:seedA 4s ease-in-out infinite}
|
||
|
|
.sS{animation:seedS 4s ease-in-out infinite}
|
||
|
|
.fl2{animation:fal2 7s ease-in-out infinite}
|
||
|
|
.fi2{animation:fi2 1s ease-out .5s both}
|
||
|
|
.cb{animation:curveBreath 5s ease-in-out infinite}
|
||
|
|
.rp2{animation:ringP 7s ease-in-out infinite}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<rect width="600" height="700" fill="#0D1117"/>
|
||
|
|
|
||
|
|
<!-- Outer ring -->
|
||
|
|
<path class="rp2" d="M300,52 L450,114 L514,270 L450,426 L300,488 L150,426 L86,270 L150,114 Z"
|
||
|
|
fill="none" stroke="#C0CCD8" stroke-width="1" stroke-opacity=".035"/>
|
||
|
|
|
||
|
|
<g class="fl2">
|
||
|
|
<!-- 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,.055)" stroke-width="1.5"/>
|
||
|
|
|
||
|
|
<!-- ═══ SILVER REGION (Ref) — translucent fill ═══ -->
|
||
|
|
<g clip-path="url(#sClip2)">
|
||
|
|
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C200,350 400,190 300,75Z" fill="url(#sF)"/>
|
||
|
|
|
||
|
|
<!-- Grid blocks — bright silver on dark -->
|
||
|
|
<g filter="url(#sGl)">
|
||
|
|
<rect class="bp2" x="140" y="170" width="50" height="38" rx="4" fill="#B0BCC8" opacity=".65" style="--o:.65"/>
|
||
|
|
<rect class="bp2" x="200" y="170" width="50" height="38" rx="4" fill="#B0BCC8" opacity=".58" style="--o:.58;animation-delay:.2s"/>
|
||
|
|
<rect class="bp2" x="136" y="222" width="54" height="44" rx="4" fill="#A0ACC0" opacity=".55" style="--o:.55;animation-delay:.35s"/>
|
||
|
|
<rect class="bp2" x="200" y="222" width="46" height="44" rx="4" fill="#A0ACC0" opacity=".48" style="--o:.48;animation-delay:.5s"/>
|
||
|
|
<rect class="bp2" x="134" y="280" width="52" height="40" rx="4" fill="#90A0B4" opacity=".42" style="--o:.42;animation-delay:.65s"/>
|
||
|
|
<rect class="bp2" x="140" y="334" width="44" height="34" rx="4" fill="#8898A8" opacity=".35" style="--o:.35;animation-delay:.8s"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ★ SEED of Onto: amber dot in silver -->
|
||
|
|
<circle class="sA" cx="190" cy="385" r="8" fill="url(#aN)" opacity=".4"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ═══ AMBER REGION (Onto) — translucent fill ═══ -->
|
||
|
|
<g clip-path="url(#aClip2)">
|
||
|
|
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C200,350 400,190 300,75Z" fill="url(#aF)"/>
|
||
|
|
|
||
|
|
<!-- DAG — proper acyclic top→bottom -->
|
||
|
|
<g filter="url(#gl2)">
|
||
|
|
<!-- Edges -->
|
||
|
|
<line class="de2" x1="395" y1="152" x2="355" y2="228" stroke="#E8A838" stroke-width="5" stroke-linecap="round" style="animation-delay:.15s"/>
|
||
|
|
<line class="de2" x1="395" y1="152" x2="440" y2="228" stroke="#E8A838" stroke-width="5" stroke-linecap="round" style="animation-delay:.35s"/>
|
||
|
|
<line class="de2" x1="355" y1="244" x2="400" y2="310" stroke="#E8A838" stroke-width="4.5" stroke-linecap="round" style="animation-delay:.6s"/>
|
||
|
|
<line class="de2" x1="440" y1="244" x2="400" y2="310" stroke="#E8A838" stroke-width="4.5" stroke-linecap="round" style="animation-delay:.8s"/>
|
||
|
|
<line class="de2" x1="400" y1="326" x2="386" y2="386" stroke="#E8A838" stroke-width="4" stroke-linecap="round" style="animation-delay:1.05s"/>
|
||
|
|
<!-- Arrowheads -->
|
||
|
|
<polygon class="ap2" points="349,220 357,232 363,222" fill="#E8A838" style="animation-delay:.15s"/>
|
||
|
|
<polygon class="ap2" points="434,220 442,232 448,220" fill="#E8A838" style="animation-delay:.35s"/>
|
||
|
|
<polygon class="ap2" points="394,303 402,315 408,303" fill="#E8A838" style="animation-delay:.6s"/>
|
||
|
|
<polygon class="ap2" points="380,380 388,392 394,380" fill="#E8A838" style="animation-delay:1.05s"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Nodes -->
|
||
|
|
<g filter="url(#nSh2)">
|
||
|
|
<g class="nf2" style="animation-delay:0s">
|
||
|
|
<circle class="np2" cx="395" cy="144" r="19" fill="url(#aN)" style="--r:19">
|
||
|
|
<animate attributeName="opacity" values=".88;1;.88" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<g class="nf2" style="animation-delay:.3s">
|
||
|
|
<circle class="np2" cx="355" cy="236" r="16" fill="url(#aN)" style="--r:16">
|
||
|
|
<animate attributeName="opacity" values=".82;1;.82" dur="3.5s" begin=".4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<g class="nf2" style="animation-delay:.5s">
|
||
|
|
<circle class="np2" cx="440" cy="236" r="16" fill="url(#aN)" style="--r:16">
|
||
|
|
<animate attributeName="opacity" values=".82;1;.82" dur="3.5s" begin=".7s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<g class="nf2" style="animation-delay:.8s">
|
||
|
|
<circle class="np2" cx="400" cy="318" r="17" fill="url(#aN)" style="--r:17">
|
||
|
|
<animate attributeName="opacity" values=".85;1;.85" dur="3.5s" begin="1s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
<g class="nf2" style="animation-delay:1.1s">
|
||
|
|
<circle class="np2" cx="386" cy="393" r="14" fill="url(#aN)" style="--r:14">
|
||
|
|
<animate attributeName="opacity" values=".78;.95;.78" dur="3.5s" begin="1.3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ★ SEED of Ref: silver square in amber -->
|
||
|
|
<g class="sS">
|
||
|
|
<rect x="418" y="148" width="12" height="12" rx="2" fill="#C0CCD8" opacity=".35"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- S-CURVE dividing line -->
|
||
|
|
<path class="cb" d="M300,75 C400,190 200,350 300,465"
|
||
|
|
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.5" filter="url(#curveGlow2)"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Wordmark -->
|
||
|
|
<g class="fi2">
|
||
|
|
<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>
|