194 lines
13 KiB
XML
194 lines
13 KiB
XML
|
<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#E6ECF2"/>
|
||
|
|
<stop offset="50%" stop-color="#BCC8D4"/>
|
||
|
|
<stop offset="100%" stop-color="#8090A4"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#B87000"/>
|
||
|
|
<stop offset="50%" stop-color="#E0B040"/>
|
||
|
|
<stop offset="100%" stop-color="#F8D860"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#F5C44A"/>
|
||
|
|
<stop offset="100%" stop-color="#DC9018"/>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#A8B4C8"/>
|
||
|
|
<stop offset="100%" stop-color="#5A6A7C"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<clipPath id="sC3">
|
||
|
|
<path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="aC3">
|
||
|
|
<path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
|
||
|
|
</clipPath>
|
||
|
|
|
||
|
|
<filter id="nGl3" 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="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
|
||
|
|
<filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||
|
|
<filter id="cGl3"><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&display=swap');
|
||
|
|
@keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
|
||
|
|
@keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
|
||
|
|
@keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
|
||
|
|
@keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
|
||
|
|
@keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
|
||
|
|
@keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
|
||
|
|
@keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
|
||
|
|
@keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
|
||
|
|
@keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
||
|
|
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||
|
|
@keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
|
||
|
|
@keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
|
||
|
|
@keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
|
||
|
|
@keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
|
||
|
|
.bp3{animation:bp3 4.5s ease-in-out infinite}
|
||
|
|
.nf3{animation:nf3 5s ease-in-out infinite}
|
||
|
|
.np3{animation:np3 3.5s ease-in-out infinite}
|
||
|
|
.de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
|
||
|
|
.ap3{animation:ap3 3s ease-in-out infinite}
|
||
|
|
.sAm{animation:seedAmber 4s ease-in-out infinite}
|
||
|
|
.sSi{animation:seedSilver 4s ease-in-out infinite}
|
||
|
|
.fl3{animation:fl3 7s ease-in-out infinite}
|
||
|
|
.fi3{animation:fi3 1s ease-out .5s both}
|
||
|
|
.cB3{animation:cB3 5s ease-in-out infinite}
|
||
|
|
.rP3{animation:rP3 7s ease-in-out infinite}
|
||
|
|
.tP{animation:tP 5.5s ease-in-out infinite}
|
||
|
|
.cD{animation:cD 4s ease-in-out infinite}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- ═══ IMAGE GROUP ═══ -->
|
||
|
|
<g id="image-group" transform="translate(-30, -22) scale(0.50)">
|
||
|
|
<!-- ═══ PAKUA FRAME ═══ -->
|
||
|
|
<path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
|
||
|
|
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||
|
|
<path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
|
||
|
|
fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
|
||
|
|
|
||
|
|
<!-- Trigram marks -->
|
||
|
|
<g class="tP" style="--to:.1">
|
||
|
|
<line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
|
||
|
|
<line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
|
||
|
|
<line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.08;animation-delay:2.75s">
|
||
|
|
<line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||
|
|
<line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||
|
|
<line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||
|
|
<line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.07;animation-delay:.7s">
|
||
|
|
<line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
<line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.07;animation-delay:2s">
|
||
|
|
<line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.06;animation-delay:1.1s">
|
||
|
|
<line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||
|
|
<line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||
|
|
<line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
<g class="tP" style="--to:.06;animation-delay:5s">
|
||
|
|
<line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Corner dots -->
|
||
|
|
<circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||
|
|
<circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||
|
|
<circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||
|
|
<circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||
|
|
<circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||
|
|
<circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||
|
|
<circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||
|
|
<circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||
|
|
|
||
|
|
<!-- MAIN SYMBOL -->
|
||
|
|
<g class="fl3">
|
||
|
|
<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 -->
|
||
|
|
<g clip-path="url(#sC3)">
|
||
|
|
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
|
||
|
|
<rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
|
||
|
|
<rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
|
||
|
|
<rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
|
||
|
|
<rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
|
||
|
|
<rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
|
||
|
|
<rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
|
||
|
|
<rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
|
||
|
|
<circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- AMBER REGION -->
|
||
|
|
<g clip-path="url(#aC3)">
|
||
|
|
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
|
||
|
|
<g filter="url(#nGl3)">
|
||
|
|
<line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
|
||
|
|
<line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
|
||
|
|
<line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
|
||
|
|
<line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
|
||
|
|
<line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
|
||
|
|
<polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
|
||
|
|
<polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
|
||
|
|
<polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
|
||
|
|
<polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
|
||
|
|
</g>
|
||
|
|
<g class="nf3" style="animation-delay:0s">
|
||
|
|
<circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
|
||
|
|
</g>
|
||
|
|
<g class="nf3" style="animation-delay:.3s">
|
||
|
|
<circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||
|
|
</g>
|
||
|
|
<g class="nf3" style="animation-delay:.5s">
|
||
|
|
<circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||
|
|
</g>
|
||
|
|
<g class="nf3" style="animation-delay:.8s">
|
||
|
|
<circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
|
||
|
|
</g>
|
||
|
|
<g class="nf3" style="animation-delay:1.1s">
|
||
|
|
<circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
|
||
|
|
</g>
|
||
|
|
<rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- S-CURVE -->
|
||
|
|
<path class="cB3" d="M300,75 C405,195 195,345 300,465"
|
||
|
|
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ═══ TEXT GROUP ═══ -->
|
||
|
|
<g id="text-group" class="fi3">
|
||
|
|
<text x="400" y="131" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
|
||
|
|
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||
|
|
</text>
|
||
|
|
<text x="398" y="156" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="16" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
|
||
|
|
Structure that remembers why
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|