chore: add web and branding
This commit is contained in:
Jesús Pérez
parent
591f0e0206
commit
0436a3b436
GPG Key ID:
9F243E355E0BC939
228
assets/branding/README.md
Normal file
228
assets/branding/README.md
Normal file
@ -0,0 +1,228 @@
|
||||
# OntoRef Branding Assets
|
||||
|
||||
Complete branding system for OntoRef - Structure that remembers why.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```text
|
||||
branding/
|
||||
├── README.md # This file
|
||||
├── ontoref-h.svg # Horizontal logo (animated)
|
||||
├── ontoref-v.svg # Vertical logo (animated)
|
||||
├── ontoref-icon.svg # Icon variant (image only)
|
||||
└── ontoref-text.svg # Text variant (wordmark only)
|
||||
```
|
||||
|
||||
## Logo Variants
|
||||
|
||||
### Primary Logos (4 total)
|
||||
|
||||
| Variant | Use Case |
|
||||
|---------|----------|
|
||||
| `ontoref-h.svg` | Horizontal, animated — Banners, headers |
|
||||
| `ontoref-v.svg` | Vertical, animated — Posters, mobile |
|
||||
| `ontoref-icon.svg` | Icon, animated — Standalone image |
|
||||
| `ontoref-text.svg` | Wordmark — Text-only variant |
|
||||
|
||||
### Static Variants (3 total - no animations)
|
||||
|
||||
| Variant | Use Case |
|
||||
|---------|----------|
|
||||
| `ontoref-h-static.svg` | Print, documents (light background) |
|
||||
| `ontoref-v-static.svg` | Print, posters (light background) |
|
||||
| `ontoref-icon-static.svg` | Print, icons (light background) |
|
||||
|
||||
### Dark Mode Variants (2 total - dark background)
|
||||
|
||||
| Variant | Use Case |
|
||||
|---------|----------|
|
||||
| `ontoref-dark-h.svg` | Dark UI, dark mode apps, dark websites |
|
||||
| `ontoref-dark-v.svg` | Dark backgrounds, dark applications |
|
||||
|
||||
### Monochrome Variants (4 total - black and white)
|
||||
|
||||
| Variant | Use Case |
|
||||
|---------|----------|
|
||||
| `ontoref-mono-black-h.svg` | Print, documents (light background) |
|
||||
| `ontoref-mono-black-v.svg` | Print documents (light background) |
|
||||
| `ontoref-mono-white-h.svg` | Dark backgrounds, dark print |
|
||||
| `ontoref-mono-white-v.svg` | Dark backgrounds, dark print |
|
||||
|
||||
**Note**: Black and white variants are identical in this version.
|
||||
|
||||
## Color Palette
|
||||
|
||||
Core brand colors:
|
||||
|
||||
- **Silver** (`#C0CCD8`) - Ref/Structure side, light elements
|
||||
- **Amber** (`#E8A838`) - Onto/Graph side, accent color
|
||||
- **Dark Background** (`#0F1319`) - Dark mode backgrounds
|
||||
- **Gray** (`#8090A4`, `#5A6A7C`) - Secondary elements
|
||||
|
||||
## Usage Guidelines
|
||||
|
||||
### Responsive Design
|
||||
|
||||
All logos are designed with `viewBox` only (no fixed width/height) for maximum responsiveness:
|
||||
|
||||
- Use in HTML with CSS sizing: `<img src="ontoref-h.svg" class="logo">`
|
||||
- Add CSS: `.logo { max-width: 100%; height: auto; }`
|
||||
- Logo scales proportionally to its container
|
||||
|
||||
### Logo Sizing Recommendations
|
||||
|
||||
- **Horizontal (`-h`)**: Use for banners, headers, wide layouts
|
||||
- **Vertical (`-v`)**: Use for posters, splash screens, vertical layouts
|
||||
- **Icon**: Use as symbol, favicon, or standalone image
|
||||
- **Text**: Use as wordmark, branding element
|
||||
|
||||
### Layout Rules
|
||||
|
||||
- Maintain minimum 15px clear space around logos
|
||||
- Never distort, rotate, or modify aspect ratio
|
||||
- Prefer animated variants for digital displays
|
||||
- Use static variants for print, PDFs, email
|
||||
|
||||
### Dark Mode
|
||||
|
||||
- Dark backgrounds (`#0F1319` or darker) provide optimal contrast
|
||||
- Logos automatically adapt due to color scheme design
|
||||
- Silver elements bright on dark, Amber accent stands out
|
||||
|
||||
### Accessibility
|
||||
|
||||
- All color combinations meet WCAG AA contrast standards
|
||||
- Logos use geometric shapes (octagon, circles, rectangles) for clarity
|
||||
- Descriptive alt-text: "OntoRef - Structure that remembers why"
|
||||
- No flashing or strobing animations
|
||||
|
||||
## Design Elements
|
||||
|
||||
- **Octagon Frame**: Eight-sided structure representing solid foundation
|
||||
- **Silver Region** (Left): Represents Ref (reference), structure, organization
|
||||
- **Amber Region** (Right): Represents Onto (ontology), graph, relationships
|
||||
- **S-Curve**: Dividing line showing duality and balance
|
||||
- **Seed Elements**: Small visual markers in each region
|
||||
- **DAG Visualization**: Shows graph relationships in Onto region
|
||||
- **Grid Pattern**: Shows structured data in Ref region
|
||||
|
||||
## Asset Features
|
||||
|
||||
✨ **Responsive SVG**
|
||||
- No fixed dimensions - scales to any size
|
||||
- ViewBox-based for perfect proportions
|
||||
- Works in all modern browsers
|
||||
|
||||
🎨 **Animated Elements**
|
||||
- Floating elements with subtle motion
|
||||
- Pulsing visual elements
|
||||
- Smooth opacity transitions
|
||||
|
||||
📊 **Dual-Region Design**
|
||||
- Left side: Silver (Structure/Reference)
|
||||
- Right side: Amber (Ontology/Graph)
|
||||
- Represents the duality of OntoRef
|
||||
|
||||
## Technical Specifications
|
||||
|
||||
### SVG Features
|
||||
|
||||
- Linear gradients for depth and visual interest
|
||||
- SMIL animations for smooth motion effects
|
||||
- Responsive viewBox dimensions
|
||||
- Clean, minimal markup for fast loading
|
||||
|
||||
### Color Gradients
|
||||
|
||||
- **Silver Gradient**: `#E6ECF2` → `#BCC8D4` → `#8090A4`
|
||||
- **Amber Gradient**: `#B87000` → `#E0B040` → `#F8D860`
|
||||
- **Node Gradients**: Silver and Amber variants for visual hierarchy
|
||||
|
||||
## Animations
|
||||
|
||||
### Animated Elements
|
||||
|
||||
- **Floating motion**: Subtle translateY animation on main symbol
|
||||
- **Pulsing opacity**: Grid blocks and nodes fade in/out
|
||||
- **Drawing effects**: DAG lines animate with stroke-dashoffset
|
||||
- **Glow effects**: Soft gaussian blur on animated elements
|
||||
|
||||
### Animation Timing
|
||||
|
||||
- Base cycle: 3.5s - 7s for different elements
|
||||
- Ease-in-out interpolation for smooth motion
|
||||
- Staggered delays for visual sequence
|
||||
- Infinite loop for continuous operation
|
||||
|
||||
## File Information
|
||||
|
||||
### All Variants
|
||||
|
||||
- **Primary Animated** (4 files): ~13KB each (h, v, icon) + ~1KB (text)
|
||||
- **Static Variants** (3 files): ~13KB each
|
||||
- **Dark Variants** (2 files): ~13KB each
|
||||
- **Monochrome Variants** (4 files): ~13KB each
|
||||
|
||||
**Total Assets**: 13 SVG files (~150KB total)
|
||||
|
||||
All files are SVG format with responsive viewBox (no fixed dimensions).
|
||||
|
||||
## Version Information
|
||||
|
||||
- **Created**: 2026-03-11
|
||||
- **Version**: 1.0
|
||||
- **Format**: SVG + responsive design
|
||||
- **Compatibility**: All modern browsers
|
||||
- **Total Assets**: 4 (2 logos, 1 icon, 1 text)
|
||||
|
||||
## Brand Philosophy
|
||||
|
||||
OntoRef represents:
|
||||
|
||||
- 🏗️ **Duality**: Structure (Ref) and Ontology (Onto) working together
|
||||
- 🔗 **Connection**: Relationships between data and organization
|
||||
- 💾 **Memory**: "Structure that remembers why"
|
||||
- 📊 **Organization**: Clear, hierarchical representation
|
||||
- ✨ **Motion**: Active, living data structures
|
||||
- 🎯 **Balance**: Symmetry between form and function
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### HTML Image
|
||||
```html
|
||||
<img src="ontoref-h.svg" alt="OntoRef - Structure that remembers why" class="logo">
|
||||
```
|
||||
|
||||
### CSS Sizing
|
||||
```css
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-small {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.logo-large {
|
||||
width: 800px;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG Inline
|
||||
```html
|
||||
<svg viewBox="0 0 575 250">
|
||||
<!-- Logo content scales responsively -->
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- Main project: `/Users/Akasha/Development/ontoref/`
|
||||
- Logo files location: `/assets/branding/`
|
||||
- Original SVG files: `/assets/ontoref*.svg`
|
||||
|
||||
---
|
||||
|
||||
**All assets in the OntoRef branding system are optimized for scalability, accessibility, and brand consistency across digital and print media.**
|
||||
1194
assets/branding/index.html
Normal file
1194
assets/branding/index.html
Normal file
File diff suppressed because it is too large
Load Diff
195
assets/branding/ontoref-dark-h.svg
Normal file
195
assets/branding/ontoref-dark-h.svg
Normal file
@ -0,0 +1,195 @@
|
||||
<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>
|
||||
|
||||
<rect width="100%" height="100%" fill="#0F1319"/>
|
||||
|
||||
<!-- ═══ 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
195
assets/branding/ontoref-dark-v.svg
Normal file
195
assets/branding/ontoref-dark-v.svg
Normal file
@ -0,0 +1,195 @@
|
||||
<svg viewBox="0 0 380 340" 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>
|
||||
|
||||
<rect width="100%" height="100%" fill="#0F1319"/>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(40, -20) 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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
197
assets/branding/ontoref-h-static.svg
Normal file
197
assets/branding/ontoref-h-static.svg
Normal file
@ -0,0 +1,197 @@
|
||||
<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}
|
||||
/* Static variant: disable all animations */
|
||||
.bp3, .nf3, .np3, .de3, .ap3, .sAm, .sSi, .fl3, .fi3, .cB3, .rP3, .tP, .cD {
|
||||
animation: none !important;
|
||||
}
|
||||
</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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-h.svg
Normal file
193
assets/branding/ontoref-h.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
79
assets/branding/ontoref-icon-static.svg
Normal file
79
assets/branding/ontoref-icon-static.svg
Normal file
@ -0,0 +1,79 @@
|
||||
<svg viewBox="60 30 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<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>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<!-- Outer octagon -->
|
||||
<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="2.5" stroke-opacity="0.8"/>
|
||||
|
||||
<!-- Inner decorative ring -->
|
||||
<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="2" stroke-opacity="0.7"/>
|
||||
|
||||
<!-- ═══ MAIN SYMBOL ═══ -->
|
||||
<g>
|
||||
<!-- Octagon outline -->
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
|
||||
fill="none" stroke="#8090A4" stroke-width="1.5" stroke-opacity="0.4"/>
|
||||
|
||||
<!-- SILVER REGION (Ref / Structure) -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<!-- Background region -->
|
||||
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z"
|
||||
fill="#C0CCD8" opacity="0.85"/>
|
||||
|
||||
<!-- Grid blocks -->
|
||||
<rect x="165" y="160" width="52" height="40" rx="4" fill="#E8A838" opacity="0.75" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="235" y="223" width="48" height="38" rx="4" fill="#E8A838" opacity="0.70" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="163" y="220" width="55" height="46" rx="4" fill="#E8A838" opacity="0.68" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="168" y="345" width="25" height="18" rx="4" fill="#E8A838" opacity="0.65" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="220" y="290" width="35" height="38" rx="4" fill="#E8A838" opacity="0.68" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="160" y="285" width="40" height="32" rx="4" fill="#E8A838" opacity="0.62" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
<rect x="220" y="350" width="28" height="24" rx="4" fill="#E8A838" opacity="0.62" stroke="rgba(255,255,255,.5)" stroke-width="1"/>
|
||||
|
||||
<!-- Seed circle in silver -->
|
||||
<circle cx="265" cy="170" r="16" fill="#E8A838" opacity="0.88" stroke="rgba(255,255,255,.6)" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION (Onto / Graph) -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<!-- Background region -->
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z"
|
||||
fill="#E8A838" opacity="0.85"/>
|
||||
|
||||
<!-- DAG Lines -->
|
||||
<line x1="386" y1="162" x2="355" y2="214" stroke="#6B7280" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="405" y1="162" x2="440" y2="214" stroke="#6B7280" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="364" y1="247" x2="398" y2="294" stroke="#6B7280" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
|
||||
<line x1="431" y1="247" x2="398" y2="294" stroke="#6B7280" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
|
||||
<line x1="394" y1="331" x2="385" y2="368" stroke="#6B7280" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
|
||||
<!-- Arrowheads -->
|
||||
<polygon points="349,210 357,222 363,212" fill="#6B7280" opacity="0.7"/>
|
||||
<polygon points="434,210 442,222 448,210" fill="#6B7280" opacity="0.7"/>
|
||||
<polygon points="392,290 400,302 406,290" fill="#6B7280" opacity="0.65"/>
|
||||
<polygon points="379,365 387,377 393,365" fill="#6B7280" opacity="0.6"/>
|
||||
|
||||
<!-- Nodes -->
|
||||
<circle cx="395" cy="148" r="17" fill="#A8B4C8" opacity="0.85" stroke="rgba(255,255,255,.6)" stroke-width="2"/>
|
||||
<circle cx="355" cy="236" r="14" fill="#A8B4C8" opacity="0.82" stroke="rgba(255,255,255,.6)" stroke-width="1.5"/>
|
||||
<circle cx="440" cy="236" r="14" fill="#A8B4C8" opacity="0.82" stroke="rgba(255,255,255,.6)" stroke-width="1.5"/>
|
||||
<circle cx="398" cy="316" r="15" fill="#A8B4C8" opacity="0.83" stroke="rgba(255,255,255,.6)" stroke-width="1.5"/>
|
||||
<circle cx="385" cy="390" r="12" fill="#A8B4C8" opacity="0.80" stroke="rgba(255,255,255,.6)" stroke-width="1.5"/>
|
||||
|
||||
<!-- Seed square in amber -->
|
||||
<rect x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity="0.9" stroke="rgba(255,255,255,.6)" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE divider -->
|
||||
<path d="M300,75 C405,195 195,345 300,465"
|
||||
fill="none" stroke="rgba(255,255,255,.15)" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
197
assets/branding/ontoref-icon.svg
Normal file
197
assets/branding/ontoref-icon.svg
Normal file
@ -0,0 +1,197 @@
|
||||
<svg viewBox="0 0 600 700" 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 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}
|
||||
.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>
|
||||
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<!-- Outer octagon R=218 -->
|
||||
<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"/>
|
||||
<!-- Inner decorative ring R=208 -->
|
||||
<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 at 8 positions -->
|
||||
<!-- Top (☰ heaven: 3 solid) — silver -->
|
||||
<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>
|
||||
<!-- Bottom (☷ earth: 3 broken) — amber -->
|
||||
<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>
|
||||
<!-- Right (☲ fire) — amber -->
|
||||
<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>
|
||||
<!-- Left (☵ water) — silver -->
|
||||
<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>
|
||||
<!-- TR, TL, BR, BL — alternating -->
|
||||
<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" transform="scale(0.65) translate(64, 0)">
|
||||
<!-- Octagon outline R=195 -->
|
||||
<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 / Structure) -->
|
||||
<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"/>
|
||||
<!-- Grid blocks (two columns) -->
|
||||
<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"/>
|
||||
<!-- ★ SEED: amber circle in silver -->
|
||||
<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 (Onto / Graph) -->
|
||||
<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"/>
|
||||
<!-- DAG -->
|
||||
<g filter="url(#nGl3)">
|
||||
<!-- Line 1: 395,155 → 355,236 (nodo 2, r=14) termina antes del nodo -->
|
||||
<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 2: 395,155 → 440,236 (nodo 3, r=14) termina antes del nodo -->
|
||||
<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 3: 355,244 → 398,316 (nodo 4, r=15) termina antes del nodo -->
|
||||
<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 4: 440,244 → 398,316 (nodo 4, r=15) termina antes del nodo -->
|
||||
<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 5: 398,324 → 385,390 (nodo 5, r=12) termina antes del nodo -->
|
||||
<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"/>
|
||||
<!-- Arrowheads -->
|
||||
<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>
|
||||
<!-- Nodes (silver gradient) -->
|
||||
<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>
|
||||
<!-- ★ SEED: silver square in amber -->
|
||||
<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>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-mono-black-h.svg
Normal file
193
assets/branding/ontoref-mono-black-h.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: grayscale(1) contrast(1.1);">
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-mono-black-v.svg
Normal file
193
assets/branding/ontoref-mono-black-v.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<svg viewBox="0 0 380 340" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: grayscale(1) contrast(1.1);">
|
||||
<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(40, -20) 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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-mono-white-h.svg
Normal file
193
assets/branding/ontoref-mono-white-h.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: grayscale(1) invert(1) contrast(1.1);">
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-mono-white-v.svg
Normal file
193
assets/branding/ontoref-mono-white-v.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<svg viewBox="0 0 380 340" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: grayscale(1) invert(1) contrast(1.1);">
|
||||
<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(40, -20) 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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
19
assets/branding/ontoref-text.svg
Normal file
19
assets/branding/ontoref-text.svg
Normal file
@ -0,0 +1,19 @@
|
||||
<svg viewBox="0 0 400 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
|
||||
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||||
.fi3{animation:fi3 1s ease-out .5s both}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Wordmark -->
|
||||
<g class="fi3">
|
||||
<text x="200" y="85" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="92" font-weight="600" letter-spacing=".03em">
|
||||
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||||
</text>
|
||||
<text x="200" y="145" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="22" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
|
||||
Structure that remembers why.
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 878 B |
197
assets/branding/ontoref-v-static.svg
Normal file
197
assets/branding/ontoref-v-static.svg
Normal file
@ -0,0 +1,197 @@
|
||||
<svg viewBox="0 0 380 340" 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}
|
||||
/* Static variant: disable all animations */
|
||||
.bp3, .nf3, .np3, .de3, .ap3, .sAm, .sSi, .fl3, .fi3, .cB3, .rP3, .tP, .cD {
|
||||
animation: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(40, -20) 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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
193
assets/branding/ontoref-v.svg
Normal file
193
assets/branding/ontoref-v.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<svg viewBox="0 0 380 340" 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(40, -20) 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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
203
assets/branding/pakua/ontoref-pakua-dark-v.svg
Normal file
203
assets/branding/pakua/ontoref-pakua-dark-v.svg
Normal file
@ -0,0 +1,203 @@
|
||||
<svg viewBox="0 0 380 340" 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,90 C360,240 240,300 300,450 L225,450 L120,345 L120,195 L225,90 Z"/>
|
||||
</clipPath>
|
||||
<clipPath id="aC3">
|
||||
<path d="M300,90 L375,90 L480,195 L480,345 L375,450 L300,450 C240,300 360,240 300,90 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>
|
||||
|
||||
<rect width="100%" height="100%" fill="#0F1319"/>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(40, -20) scale(0.50)">
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<path d="M383,69 L501,188 L501,353 L384,470 L217,471 L99,353 L99,187 L216,70 Z"
|
||||
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||||
<path d="M380,78 L492,191 L492,350 L380,461 L220,462 L108,349 L108,190 L220,79 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="478" x2="296" y2="478" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="304" y1="478" x2="320" y2="478" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="282" y1="484" x2="295" y2="484" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="305" y1="484" x2="318" y2="484" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="282" y1="490" x2="295" y2="490" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="305" y1="490" x2="318" y2="490" stroke="#E8A838" stroke-width="1.5" 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="509" y1="174" x2="520" y2="183" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="505" y1="168" x2="516" y2="177" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||||
<line x1="80" y1="174" x2="91" y2="183" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="84" y1="168" x2="95" y2="177" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||||
<line x1="509" y1="357" x2="520" y2="367" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="505" y1="363" x2="516" y2="372" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:5s">
|
||||
<line x1="80" y1="357" x2="91" y2="367" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="84" y1="363" x2="95" y2="372" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner dots -->
|
||||
<circle class="cD" cx="383" cy="69" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||||
<circle class="cD" cx="501" cy="188" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||||
<circle class="cD" cx="501" cy="353" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||||
<circle class="cD" cx="384" cy="470" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||||
<circle class="cD" cx="217" cy="471" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||||
<circle class="cD" cx="99" cy="353" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||||
<circle class="cD" cx="99" cy="187" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||||
<circle class="cD" cx="216" cy="70" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||||
|
||||
<!-- ═══ MAIN SYMBOL ═══ -->
|
||||
<g class="fl3">
|
||||
<path d="M375,90 L480,195 L480,345 L375,450 L225,450 L120,345 L120,195 L225,90 Z"
|
||||
fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
|
||||
|
||||
<!-- SILVER REGION -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<path d="M300,90 C360,240 240,300 300,450 L225,450 L120,345 L120,195 L225,90 Z" fill="url(#sG3)" opacity=".93"/>
|
||||
<g transform="translate(200,270) scale(0.88) translate(-200,-270)">
|
||||
<rect class="bp3" x="148" y="170" 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="240" y="230" 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="146" y="227" 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="152" y="353" 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="235" y="297" 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="143" y="293" 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="232" y="357" 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="241" cy="157" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<path d="M300,90 L375,90 L480,195 L480,345 L375,450 L300,450 C240,300 360,240 300,90 Z" fill="url(#aG3)" opacity=".88"/>
|
||||
<g transform="translate(390,260) scale(0.88) translate(-390,-270)">
|
||||
<g transform="rotate(-10, 395, 267)">
|
||||
<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="155" 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>
|
||||
</g>
|
||||
<rect class="sAm" x="328" y="353" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE -->
|
||||
<path class="cB3" d="M300,90 C360,240 240,300 300,450"
|
||||
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="190" y="290" 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="190" y="315" 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>
|
||||
|
After Width: | Height: | Size: 14 KiB |
203
assets/branding/pakua/ontoref_pakua_img.svg
Normal file
203
assets/branding/pakua/ontoref_pakua_img.svg
Normal file
@ -0,0 +1,203 @@
|
||||
<svg viewBox="60 30 480 490" 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,90 C360,240 240,300 300,450 L225,450 L120,345 L120,195 L225,90 Z"/>
|
||||
</clipPath>
|
||||
<clipPath id="aC3">
|
||||
<path d="M300,90 L375,90 L480,195 L480,345 L375,450 L300,450 C240,300 360,240 300,90 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 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}
|
||||
.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>
|
||||
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<!-- Outer octagon R=218 rotated 22.5° -->
|
||||
<path d="M383,69 L501,188 L501,353 L384,470 L217,471 L99,353 L99,187 L216,70 Z"
|
||||
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||||
<!-- Inner decorative ring R=208 rotated 22.5° -->
|
||||
<path d="M380,78 L492,191 L492,350 L380,461 L220,462 L108,349 L108,190 L220,79 Z"
|
||||
fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
|
||||
|
||||
<!-- Trigram marks at 8 positions -->
|
||||
<!-- Top (☰ heaven: 3 solid) — silver, flat side -->
|
||||
<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>
|
||||
<!-- Bottom (☷ earth: 3 broken) — amber, flat side -->
|
||||
<g class="tP" style="--to:.08;animation-delay:2.75s">
|
||||
<line x1="280" y1="478" x2="296" y2="478" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="304" y1="478" x2="320" y2="478" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="282" y1="484" x2="295" y2="484" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="305" y1="484" x2="318" y2="484" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="282" y1="490" x2="295" y2="490" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="305" y1="490" x2="318" y2="490" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Right (☲ fire) — amber, flat side -->
|
||||
<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>
|
||||
<!-- Left (☵ water) — silver, flat side -->
|
||||
<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>
|
||||
<!-- TR diagonal (near vertex 501,188) — amber -->
|
||||
<g class="tP" style="--to:.06;animation-delay:1.1s">
|
||||
<line x1="509" y1="174" x2="520" y2="183" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="505" y1="168" x2="516" y2="177" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- TL diagonal (near vertex 99,187) — silver -->
|
||||
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||||
<line x1="80" y1="174" x2="91" y2="183" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="84" y1="168" x2="95" y2="177" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- BR diagonal (near vertex 501,353) — amber -->
|
||||
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||||
<line x1="509" y1="357" x2="520" y2="367" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="505" y1="363" x2="516" y2="372" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- BL diagonal (near vertex 99,353) — silver -->
|
||||
<g class="tP" style="--to:.06;animation-delay:5s">
|
||||
<line x1="80" y1="357" x2="91" y2="367" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="84" y1="363" x2="95" y2="372" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner dots at new vertex positions -->
|
||||
<circle class="cD" cx="383" cy="69" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||||
<circle class="cD" cx="501" cy="188" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||||
<circle class="cD" cx="501" cy="353" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||||
<circle class="cD" cx="384" cy="470" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||||
<circle class="cD" cx="217" cy="471" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||||
<circle class="cD" cx="99" cy="353" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||||
<circle class="cD" cx="99" cy="187" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||||
<circle class="cD" cx="216" cy="70" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||||
|
||||
<!-- ═══ MAIN SYMBOL ═══ -->
|
||||
<g class="fl3">
|
||||
<!-- Octagon outline R=195 rotated 22.5° -->
|
||||
<path d="M375,90 L480,195 L480,345 L375,450 L225,450 L120,345 L120,195 L225,90 Z"
|
||||
fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
|
||||
|
||||
<!-- SILVER REGION (Ref / Structure) -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<path d="M300,90 C360,240 240,300 300,450 L225,450 L120,345 L120,195 L225,90 Z" fill="url(#sG3)" opacity=".93"/>
|
||||
<g transform="translate(200,270) scale(0.88) translate(-200,-270)">
|
||||
<!-- Grid blocks — col1 x≈143-152, col2 x≈240-243 -->
|
||||
<rect class="bp3" x="148" y="170" 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="240" y="230" 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="146" y="227" 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="152" y="353" 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="235" y="297" 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="143" y="293" 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="232" y="357" 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"/>
|
||||
<!-- ★ SEED: amber circle in silver -->
|
||||
<circle class="sAm" cx="241" cy="157" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION (Onto / Graph) -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<path d="M300,90 L375,90 L480,195 L480,345 L375,450 L300,450 C240,300 360,240 300,90 Z" fill="url(#aG3)" opacity=".88"/>
|
||||
<g transform="translate(390,260) scale(0.88) translate(-390,-270)">
|
||||
<!-- DAG rotated 20° around centroid (395,267) -->
|
||||
<g transform="rotate(-10, 395, 267)">
|
||||
<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"/>
|
||||
<!-- Arrowheads -->
|
||||
<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>
|
||||
<!-- Nodes -->
|
||||
<g class="nf3" style="animation-delay:0s">
|
||||
<circle class="np3" cx="395" cy="155" 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>
|
||||
</g>
|
||||
<!-- ★ SEED: silver square in amber -->
|
||||
<rect class="sAm" x="328" y="353" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE -->
|
||||
<path class="cB3" d="M300,90 C360,240 240,300 300,450"
|
||||
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
112
assets/branding/tagline_analisys.md
Normal file
112
assets/branding/tagline_analisys.md
Normal file
@ -0,0 +1,112 @@
|
||||
That tagline actually lands quite elegantly — **“Ontoref — Self‑Describing Ontology & Reflection Protocol for Software Ecosystems.”**
|
||||
Let’s dissect it a bit to check conceptual and tonal alignment:
|
||||
|
||||
***
|
||||
|
||||
### Conceptual Fit
|
||||
- **Ontoref**: Already suggests *reference* and *reflection* — a protocol that both *names* and *mirrors* what *is*.
|
||||
- **Self‑Describing Ontology**: Communicates that systems using Ontoref *contain their own metadata schema* — perfect for a protocol that formalizes being.
|
||||
- **Reflection Protocol**: Adds the operational side — mechanisms for introspection, state tracking, and evolution.
|
||||
- **for Software Ecosystems**: Sets scope and audience clearly: beyond individual services, toward coordination layers and multi‑project semantics.
|
||||
|
||||
Altogether it reads as a **metasystem framework name** — the kind you associate with foundational standards like gRPC, OCI, or RDF — but with much softer humanistic overtones.
|
||||
|
||||
***
|
||||
|
||||
### Stylistic Notes
|
||||
- The rhythm (short–long–short phrase) flows well in speech.
|
||||
- Technically precise yet philosophical enough to intrigue.
|
||||
- “Self‑Describing Ontology” establishes seriousness; “Reflection Protocol” adds motion and pragmatism.
|
||||
|
||||
If you want a subtle tonal tweak, here are a few variants worth testing depending on the emphasis you want:
|
||||
|
||||
1. **Ontoref — The Reflection & Ontology Protocol for Living Codebases**
|
||||
(adds the “living” and operational emphasis)
|
||||
|
||||
2. **Ontoref — Ontology Meets Reflection**
|
||||
(minimalist, good for logo/subtitle)
|
||||
|
||||
3. **Ontoref — A Protocol for Self‑Evolving Knowledge Graphs**
|
||||
(if you want stronger graph/DAG overtones)
|
||||
|
||||
4. **Ontoref — Coordinating Being and Change Across Ecosystems**
|
||||
(philosophical yet coherent with your yin/yang frame)
|
||||
|
||||
***
|
||||
|
||||
You’ve actually hit a great linguistic equilibrium: **Ontoref** feels protocol‑like, but the subtitle humanizes it without sounding hand‑wavy.
|
||||
Would you like me to help you craft a **one‑sentence “elevator definition”** or short **manifesto line** that could accompany this tagline
|
||||
|
||||
Both of those are strong — subtle nuance makes them convey quite different worldviews. Let’s look at how each *feels and positions* the project:
|
||||
|
||||
***
|
||||
|
||||
### **1. “Evolving Codebases”**
|
||||
**Tone:** Technical, analytical, process-oriented.
|
||||
**Implication:** Systems that *change over time* — code refactors, architecture shifts, versioning.
|
||||
**Effect:** Appeals to engineers thinking in terms of growth, mutation, and lifecycle automation.
|
||||
**Vibe:** Rational evolution and semantic versioning.
|
||||
**Parallel concepts:** Darwinian adaptation, software as organism—but through an engineering lens.
|
||||
|
||||
→ *Ontoref — A Self‑Describing Ontology & Reflection Protocol for Evolving Codebases*
|
||||
Feels precise, architectural, almost *standard-spec* quality.
|
||||
|
||||
***
|
||||
|
||||
### **2. “Living Codebases”**
|
||||
**Tone:** Philosophical, organic, and relational.
|
||||
**Implication:** Codebases *as organisms* — aware, reflective, and self‑maintaining.
|
||||
**Effect:** Evokes vitality: continuous presence and adaptation, not just change.
|
||||
**Vibe:** Systemic consciousness; stronger yin/yang resonance (being/doing coexistence).
|
||||
**Parallel concepts:** “Living documentation”, “cybernetic ecosystems.”
|
||||
|
||||
→ *Ontoref — A Self‑Describing Ontology & Reflection Protocol for Living Codebases*
|
||||
Feels inspiring and poetic, perfect if the philosophy of *reciprocity between being and doing* is central.
|
||||
|
||||
***
|
||||
|
||||
### Quick synthesis
|
||||
| Phrase | Tone | Emphasis | Ideal for |
|
||||
|---------|------|-----------|------------|
|
||||
| **Evolving Codebases** | Technical, precise | versioning, ontological diffs | engineering audience, protocol docs |
|
||||
| **Living Codebases** | Philosophical, organic | continuous awareness | broader vision or manifesto framing |
|
||||
|
||||
***
|
||||
|
||||
If we treat *Ontoref* as both a **protocol** and a **practice**, *“Living Codebases”* encapsulates that duality best — code that *knows itself and grows responsibly.*
|
||||
|
||||
Here are a few tagline options that harmonize with **Ontoref’s** core idea — the coexistence of *ontology (being)* and *reflection (becoming)* — and fit both technical and evocative contexts. I’ve grouped them by tone so you can choose depending on whether you want it to read as a spec, a philosophy, or a movement.
|
||||
|
||||
***
|
||||
|
||||
### **Balanced / Core identity**
|
||||
- **“Where code knows what it is.”**
|
||||
(succinct, direct, and self‑referential — great for a homepage header)
|
||||
- **“Ontology in motion.”**
|
||||
(captures the yin‑yang dynamic in three words)
|
||||
- **“Reflective structure for evolving systems.”**
|
||||
|
||||
***
|
||||
|
||||
### **Technical / Spec tone**
|
||||
- **“A protocol for self‑describing software ecosystems.”**
|
||||
- **“Formal semantics for living architectures.”**
|
||||
- **“The ontology backbone for reflective codebases.”**
|
||||
|
||||
***
|
||||
|
||||
### **Philosophical / Visionary tone**
|
||||
- **“Being and becoming, encoded.”**
|
||||
- **“Structure that remembers why.”**
|
||||
- **“The mirror where software finds itself.”**
|
||||
- **“From ontology to operation — one loop.”**
|
||||
|
||||
***
|
||||
|
||||
### **Paired example (header + subtitle)**
|
||||
> **Ontoref — Where code knows what it is**
|
||||
> *A self‑describing ontology & reflection protocol for living codebases.*
|
||||
|
||||
***
|
||||
|
||||
Would you like me to refine a **single signature pair** (headline + subtitle) tuned specifically for your intended audience — e.g. *architects/spec authors*, *open‑source ecosystem builders*, or *AI‑integrated systems*?
|
||||
1
assets/web/architecture-diagram-details.html
Normal file
1
assets/web/architecture-diagram-details.html
Normal file
File diff suppressed because one or more lines are too long
1
assets/web/architecture-diagram.html
Normal file
1
assets/web/architecture-diagram.html
Normal file
File diff suppressed because one or more lines are too long
253
assets/web/architecture.svg
Normal file
253
assets/web/architecture.svg
Normal file
@ -0,0 +1,253 @@
|
||||
<svg viewBox="0 0 900 560" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<marker id="arr-a" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#E8A838"/>
|
||||
</marker>
|
||||
<marker id="arr-s" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#5A6A7C"/>
|
||||
</marker>
|
||||
<marker id="arr-o" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#2A5080"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- background -->
|
||||
<rect width="900" height="560" fill="#0D1117"/>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
CONSUMER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="20" width="860" height="62" rx="6"
|
||||
fill="#0F1623" stroke="#2A3A50" stroke-width="1.5" stroke-dasharray="6,4"/>
|
||||
<text x="44" y="43"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#3A5070" letter-spacing=".1em">CONSUMER PROJECT</text>
|
||||
<text x="44" y="63"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12" fill="#8090A4">ontoref</text>
|
||||
<text x="190" y="63"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#3A5070"> · .ontoref/config.ncl · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- Consumer → Tooling -->
|
||||
<line x1="280" y1="82" x2="280" y2="112"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
<text x="292" y="101"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#B87000">exec · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
TOOLING LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="116" width="548" height="192" rx="6"
|
||||
fill="#111827" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".6"/>
|
||||
<text x="30" y="132"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#E8A838" letter-spacing=".1em">TOOLING LAYER</text>
|
||||
|
||||
<!-- ./ontoref -->
|
||||
<rect x="40" y="148" width="138" height="46" rx="5"
|
||||
fill="#1C2535" stroke="#E8A838" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="109" y="167"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="600"
|
||||
fill="#E8A838" text-anchor="middle">./ontoref</text>
|
||||
<text x="109" y="183"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">bash · actor detection</text>
|
||||
|
||||
<!-- ./ontoref → ontoref.nu -->
|
||||
<line x1="178" y1="171" x2="208" y2="171"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
|
||||
<!-- ontoref.nu -->
|
||||
<rect x="208" y="148" width="174" height="46" rx="5"
|
||||
fill="#1C2535" stroke="#E8A838" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="295" y="167"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="600"
|
||||
fill="#E8A838" text-anchor="middle">ontoref.nu</text>
|
||||
<text x="295" y="183"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">Nushell dispatcher</text>
|
||||
|
||||
<!-- ontoref.nu → modules -->
|
||||
<line x1="295" y1="194" x2="295" y2="220"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
|
||||
<!-- 16 Nushell modules -->
|
||||
<rect x="40" y="220" width="506" height="72" rx="5"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="293" y="240"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">reflection/modules/ · 16 Nushell modules</text>
|
||||
<text x="293" y="257"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">adr · backlog · coder · describe · sync · store · services · nats · …</text>
|
||||
<text x="293" y="274"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#1E3A58" text-anchor="middle">subprocess fallback: direct nickel export when daemon unavailable</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
RUST CRATES
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="584" y="116" width="296" height="192" rx="6"
|
||||
fill="#111827" stroke="#8090A4" stroke-width="1.5" stroke-opacity=".4"/>
|
||||
<text x="594" y="132"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#8090A4" letter-spacing=".1em">RUST CRATES</text>
|
||||
|
||||
<!-- ontoref-ontology -->
|
||||
<rect x="600" y="148" width="264" height="38" rx="4"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1"/>
|
||||
<text x="732" y="164"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">ontoref-ontology</text>
|
||||
<text x="732" y="178"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">.ontology/*.ncl → typed Rust structs</text>
|
||||
|
||||
<!-- ontoref-reflection -->
|
||||
<rect x="600" y="198" width="264" height="38" rx="4"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1"/>
|
||||
<text x="732" y="214"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">ontoref-reflection</text>
|
||||
<text x="732" y="228"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">load + validate + execute NCL DAG modes</text>
|
||||
|
||||
<!-- ontoref-daemon (optional) -->
|
||||
<rect x="600" y="248" width="264" height="44" rx="4"
|
||||
fill="#0E1825" stroke="#2A5080" stroke-width="1" stroke-dasharray="5,3"/>
|
||||
<text x="732" y="266"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#3A6A9A" text-anchor="middle">ontoref-daemon</text>
|
||||
<text x="732" y="280"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#2A4A6A" text-anchor="middle">NCL cache · file watcher · actor registry · HTTP</text>
|
||||
<text x="862" y="249"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#2A5080" text-anchor="end">optional</text>
|
||||
|
||||
<!-- modules → daemon (HTTP, optional) -->
|
||||
<line x1="546" y1="258" x2="600" y2="265"
|
||||
stroke="#2A5080" stroke-width="1.2" stroke-dasharray="4,3" marker-end="url(#arr-o)"/>
|
||||
<text x="553" y="251"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#2A4060">HTTP</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
INTER-ROW ARROWS
|
||||
───────────────────────────────────────── -->
|
||||
|
||||
<!-- Modules → Protocol (nickel export) -->
|
||||
<line x1="190" y1="292" x2="148" y2="338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="123" y="321"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#3A5070" text-anchor="middle">nickel</text>
|
||||
<text x="123" y="332"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#3A5070" text-anchor="middle">export</text>
|
||||
|
||||
<!-- ontoref-reflection → Protocol (executes modes) -->
|
||||
<path d="M650 308 C642 326 430 330 368 338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
|
||||
<!-- ontoref-ontology → Self-description (reads .ontology/) -->
|
||||
<line x1="732" y1="308" x2="695" y2="338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="748" y="326"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#3A5070">reads</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
PROTOCOL LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="342" width="420" height="170" rx="6"
|
||||
fill="#111827" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".45"/>
|
||||
<text x="30" y="358"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#E8A838" letter-spacing=".1em">PROTOCOL LAYER</text>
|
||||
|
||||
<text x="230" y="381"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">ontology/schemas/</text>
|
||||
<text x="230" y="396"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">core · gate · state · manifest (NCL defaults)</text>
|
||||
|
||||
<line x1="36" y1="408" x2="424" y2="408" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="230" y="425"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">adrs/</text>
|
||||
<text x="230" y="440"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">schema · constraints · lifecycle forms</text>
|
||||
|
||||
<line x1="36" y1="452" x2="424" y2="452" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="230" y="469"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">reflection/schemas/ · modes/ · forms/</text>
|
||||
<text x="230" y="484"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">9 schemas · 10 NCL DAG modes · 7 forms</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
SELF-DESCRIPTION LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="456" y="342" width="424" height="170" rx="6"
|
||||
fill="#111827" stroke="#8090A4" stroke-width="1.5" stroke-opacity=".35" stroke-dasharray="8,4"/>
|
||||
<text x="466" y="358"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#8090A4" letter-spacing=".1em">SELF-DESCRIPTION · .ontology/</text>
|
||||
|
||||
<text x="668" y="381"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">ontoref consuming its own protocol</text>
|
||||
|
||||
<line x1="472" y1="393" x2="872" y2="393" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="413"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11"
|
||||
fill="#8090A4" text-anchor="middle">core.ncl · state.ncl · gate.ncl · manifest.ncl</text>
|
||||
|
||||
<line x1="472" y1="426" x2="872" y2="426" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="446"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">4 axioms · 2 tensions · 9 practices · 19 edges</text>
|
||||
<text x="668" y="462"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">3 state dimensions: protocol-maturity · self-description · ecosystem</text>
|
||||
|
||||
<line x1="472" y1="474" x2="872" y2="474" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="493"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#2A4A6A" text-anchor="middle">ADR-001: self-describing axiom in practice</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
LEGEND
|
||||
───────────────────────────────────────── -->
|
||||
<line x1="30" y1="532" x2="52" y2="532"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
<text x="57" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">active flow</text>
|
||||
|
||||
<line x1="145" y1="532" x2="167" y2="532"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="172" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">reads / executes</text>
|
||||
|
||||
<line x1="290" y1="532" x2="312" y2="532"
|
||||
stroke="#2A5080" stroke-width="1.2" stroke-dasharray="4,3" marker-end="url(#arr-o)"/>
|
||||
<text x="317" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">optional</text>
|
||||
|
||||
<rect x="393" y="525" width="12" height="12" rx="2"
|
||||
fill="none" stroke="#8090A4" stroke-opacity=".5" stroke-width="1" stroke-dasharray="4,2"/>
|
||||
<text x="410" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">self-description</text>
|
||||
|
||||
<text x="878" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#1E2A3A" text-anchor="end">ontoref architecture</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
253
assets/web/architecture_0.svg
Normal file
253
assets/web/architecture_0.svg
Normal file
@ -0,0 +1,253 @@
|
||||
<svg viewBox="0 0 900 560" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<marker id="arr-a" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#E8A838"/>
|
||||
</marker>
|
||||
<marker id="arr-s" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#5A6A7C"/>
|
||||
</marker>
|
||||
<marker id="arr-o" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0 .5 L7 3 L0 5.5Z" fill="#2A5080"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- background -->
|
||||
<rect width="900" height="560" fill="#0D1117"/>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
CONSUMER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="20" width="860" height="62" rx="6"
|
||||
fill="#0F1623" stroke="#2A3A50" stroke-width="1.5" stroke-dasharray="6,4"/>
|
||||
<text x="44" y="43"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#3A5070" letter-spacing=".1em">CONSUMER PROJECT</text>
|
||||
<text x="44" y="63"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12" fill="#8090A4">ontoref</text>
|
||||
<text x="190" y="63"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#3A5070"> · .ontoref/config.ncl · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- Consumer → Tooling -->
|
||||
<line x1="280" y1="82" x2="280" y2="112"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
<text x="292" y="101"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#B87000">exec · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
TOOLING LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="116" width="548" height="192" rx="6"
|
||||
fill="#111827" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".6"/>
|
||||
<text x="30" y="132"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#E8A838" letter-spacing=".1em">TOOLING LAYER</text>
|
||||
|
||||
<!-- ./ontoref -->
|
||||
<rect x="40" y="148" width="138" height="46" rx="5"
|
||||
fill="#1C2535" stroke="#E8A838" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="109" y="167"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="600"
|
||||
fill="#E8A838" text-anchor="middle">./ontoref</text>
|
||||
<text x="109" y="183"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">bash · actor detection</text>
|
||||
|
||||
<!-- ./ontoref → ontoref.nu -->
|
||||
<line x1="178" y1="171" x2="208" y2="171"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
|
||||
<!-- ontoref.nu -->
|
||||
<rect x="208" y="148" width="174" height="46" rx="5"
|
||||
fill="#1C2535" stroke="#E8A838" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="295" y="167"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="600"
|
||||
fill="#E8A838" text-anchor="middle">ontoref.nu</text>
|
||||
<text x="295" y="183"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">Nushell dispatcher</text>
|
||||
|
||||
<!-- ontoref.nu → modules -->
|
||||
<line x1="295" y1="194" x2="295" y2="220"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
|
||||
<!-- 16 Nushell modules -->
|
||||
<rect x="40" y="220" width="506" height="72" rx="5"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1" stroke-opacity=".5"/>
|
||||
<text x="293" y="240"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">reflection/modules/ · 16 Nushell modules</text>
|
||||
<text x="293" y="257"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">adr · backlog · coder · describe · sync · store · services · nats · …</text>
|
||||
<text x="293" y="274"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#1E3A58" text-anchor="middle">subprocess fallback: direct nickel export when daemon unavailable</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
RUST CRATES
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="584" y="116" width="296" height="192" rx="6"
|
||||
fill="#111827" stroke="#8090A4" stroke-width="1.5" stroke-opacity=".4"/>
|
||||
<text x="594" y="132"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#8090A4" letter-spacing=".1em">RUST CRATES</text>
|
||||
|
||||
<!-- ontoref-ontology -->
|
||||
<rect x="600" y="148" width="264" height="38" rx="4"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1"/>
|
||||
<text x="732" y="164"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">ontoref-ontology</text>
|
||||
<text x="732" y="178"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">.ontology/*.ncl → typed Rust structs</text>
|
||||
|
||||
<!-- ontoref-reflection -->
|
||||
<rect x="600" y="198" width="264" height="38" rx="4"
|
||||
fill="#1C2535" stroke="#5A6A7C" stroke-width="1"/>
|
||||
<text x="732" y="214"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#C0CCD8" text-anchor="middle">ontoref-reflection</text>
|
||||
<text x="732" y="228"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#5A6A7C" text-anchor="middle">load + validate + execute NCL DAG modes</text>
|
||||
|
||||
<!-- ontoref-daemon (optional) -->
|
||||
<rect x="600" y="248" width="264" height="44" rx="4"
|
||||
fill="#0E1825" stroke="#2A5080" stroke-width="1" stroke-dasharray="5,3"/>
|
||||
<text x="732" y="266"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11" font-weight="500"
|
||||
fill="#3A6A9A" text-anchor="middle">ontoref-daemon</text>
|
||||
<text x="732" y="280"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#2A4A6A" text-anchor="middle">NCL cache · file watcher · actor registry · HTTP</text>
|
||||
<text x="862" y="249"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#2A5080" text-anchor="end">optional</text>
|
||||
|
||||
<!-- modules → daemon (HTTP, optional) -->
|
||||
<line x1="546" y1="258" x2="600" y2="265"
|
||||
stroke="#2A5080" stroke-width="1.2" stroke-dasharray="4,3" marker-end="url(#arr-o)"/>
|
||||
<text x="553" y="251"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#2A4060">HTTP</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
INTER-ROW ARROWS
|
||||
───────────────────────────────────────── -->
|
||||
|
||||
<!-- Modules → Protocol (nickel export) -->
|
||||
<line x1="190" y1="292" x2="148" y2="338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="123" y="321"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#3A5070" text-anchor="middle">nickel</text>
|
||||
<text x="123" y="332"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9"
|
||||
fill="#3A5070" text-anchor="middle">export</text>
|
||||
|
||||
<!-- ontoref-reflection → Protocol (executes modes) -->
|
||||
<path d="M650 308 C642 326 430 330 368 338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
|
||||
<!-- ontoref-ontology → Self-description (reads .ontology/) -->
|
||||
<line x1="732" y1="308" x2="695" y2="338"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="748" y="326"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="9" fill="#3A5070">reads</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
PROTOCOL LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="20" y="342" width="420" height="170" rx="6"
|
||||
fill="#111827" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".45"/>
|
||||
<text x="30" y="358"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#E8A838" letter-spacing=".1em">PROTOCOL LAYER</text>
|
||||
|
||||
<text x="230" y="381"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">ontology/schemas/</text>
|
||||
<text x="230" y="396"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">core · gate · state · manifest (NCL defaults)</text>
|
||||
|
||||
<line x1="36" y1="408" x2="424" y2="408" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="230" y="425"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">adrs/</text>
|
||||
<text x="230" y="440"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">schema · constraints · lifecycle forms</text>
|
||||
|
||||
<line x1="36" y1="452" x2="424" y2="452" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="230" y="469"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">reflection/schemas/ · modes/ · forms/</text>
|
||||
<text x="230" y="484"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">9 schemas · 10 NCL DAG modes · 7 forms</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
SELF-DESCRIPTION LAYER
|
||||
───────────────────────────────────────── -->
|
||||
<rect x="456" y="342" width="424" height="170" rx="6"
|
||||
fill="#111827" stroke="#8090A4" stroke-width="1.5" stroke-opacity=".35" stroke-dasharray="8,4"/>
|
||||
<text x="466" y="358"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" font-weight="600"
|
||||
fill="#8090A4" letter-spacing=".1em">SELF-DESCRIPTION · .ontology/</text>
|
||||
|
||||
<text x="668" y="381"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="12"
|
||||
fill="#A8B4C8" text-anchor="middle">ontoref consuming its own protocol</text>
|
||||
|
||||
<line x1="472" y1="393" x2="872" y2="393" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="413"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="11"
|
||||
fill="#8090A4" text-anchor="middle">core.ncl · state.ncl · gate.ncl · manifest.ncl</text>
|
||||
|
||||
<line x1="472" y1="426" x2="872" y2="426" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="446"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">4 axioms · 2 tensions · 9 practices · 19 edges</text>
|
||||
<text x="668" y="462"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#5A6A7C" text-anchor="middle">3 state dimensions: protocol-maturity · self-description · ecosystem</text>
|
||||
|
||||
<line x1="472" y1="474" x2="872" y2="474" stroke="#1E2A3A" stroke-width="1"/>
|
||||
|
||||
<text x="668" y="493"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#2A4A6A" text-anchor="middle">ADR-001: self-describing axiom in practice</text>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
LEGEND
|
||||
───────────────────────────────────────── -->
|
||||
<line x1="30" y1="532" x2="52" y2="532"
|
||||
stroke="#E8A838" stroke-width="1.5" marker-end="url(#arr-a)"/>
|
||||
<text x="57" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">active flow</text>
|
||||
|
||||
<line x1="145" y1="532" x2="167" y2="532"
|
||||
stroke="#5A6A7C" stroke-width="1.2" marker-end="url(#arr-s)"/>
|
||||
<text x="172" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">reads / executes</text>
|
||||
|
||||
<line x1="290" y1="532" x2="312" y2="532"
|
||||
stroke="#2A5080" stroke-width="1.2" stroke-dasharray="4,3" marker-end="url(#arr-o)"/>
|
||||
<text x="317" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">optional</text>
|
||||
|
||||
<rect x="393" y="525" width="12" height="12" rx="2"
|
||||
fill="none" stroke="#8090A4" stroke-opacity=".5" stroke-width="1" stroke-dasharray="4,2"/>
|
||||
<text x="410" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10" fill="#5A6A7C">self-description</text>
|
||||
|
||||
<text x="878" y="537"
|
||||
font-family="'IBM Plex Mono',monospace" font-size="10"
|
||||
fill="#1E2A3A" text-anchor="end">ontoref architecture</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
1
assets/web/index.html
Normal file
1
assets/web/index.html
Normal file
File diff suppressed because one or more lines are too long
100
assets/web/minify.sh
Executable file
100
assets/web/minify.sh
Executable file
@ -0,0 +1,100 @@
|
||||
#!/bin/bash
|
||||
# Minify HTML files from src/ to production versions
|
||||
# Usage: ./minify.sh
|
||||
|
||||
set -e
|
||||
|
||||
BASE_DIR="$(dirname "$0")"
|
||||
FILES=("index.html" "architecture-diagram.html" "architecture-diagram-details.html")
|
||||
|
||||
minify_file() {
|
||||
local filename="$1"
|
||||
local SRC_FILE="${BASE_DIR}/src/${filename}"
|
||||
local OUT_FILE="${BASE_DIR}/${filename}"
|
||||
local TEMP_FILE="${OUT_FILE}.tmp"
|
||||
|
||||
if [ ! -f "$SRC_FILE" ]; then
|
||||
echo " Source file not found: $SRC_FILE (skipping)"
|
||||
return 0
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "Minifying ${filename}..."
|
||||
echo " Input: $SRC_FILE"
|
||||
echo " Output: $OUT_FILE"
|
||||
|
||||
perl -e "
|
||||
use strict;
|
||||
use warnings;
|
||||
|
||||
open(my \$fh, '<', '$SRC_FILE') or die \$!;
|
||||
my \$content = do { local \$/; <\$fh> };
|
||||
close(\$fh);
|
||||
|
||||
# Remove HTML comments
|
||||
\$content =~ s/<!--.*?-->//gs;
|
||||
|
||||
# Compress CSS (remove spaces and comments)
|
||||
\$content =~ s/(<style[^>]*>)(.*?)(<\/style>)/
|
||||
my \$before = \$1;
|
||||
my \$style = \$2;
|
||||
my \$after = \$3;
|
||||
\$style =~ s{\/\*.*?\*\/}{}gs;
|
||||
\$style =~ s{\s+}{ }gs;
|
||||
\$style =~ s{\s*([{}:;,>+~])\s*}{\$1}gs;
|
||||
\$before . \$style . \$after;
|
||||
/gies;
|
||||
|
||||
# Compress JavaScript (remove comments and extra spaces)
|
||||
\$content =~ s/(<script[^>]*>)(.*?)(<\/script>)/
|
||||
my \$before = \$1;
|
||||
my \$script = \$2;
|
||||
my \$after = \$3;
|
||||
\$script =~ s{\/\/.*\$}{}gm;
|
||||
\$script =~ s{\s+}{ }gs;
|
||||
\$script =~ s{\s*([{}();,])\s*}{\$1}gs;
|
||||
\$before . \$script . \$after;
|
||||
/gies;
|
||||
|
||||
# Remove whitespace between tags
|
||||
\$content =~ s/>\s+</></gs;
|
||||
|
||||
# Compress general whitespace
|
||||
\$content =~ s/\s+/ /gs;
|
||||
|
||||
# Trim
|
||||
\$content =~ s/^\s+|\s+\$//g;
|
||||
|
||||
open(my \$out, '>', '$TEMP_FILE') or die \$!;
|
||||
print \$out \$content;
|
||||
close(\$out);
|
||||
" || {
|
||||
echo "Minification failed"
|
||||
rm -f "$TEMP_FILE"
|
||||
exit 1
|
||||
}
|
||||
|
||||
mv "$TEMP_FILE" "$OUT_FILE"
|
||||
|
||||
original=$(wc -c <"$SRC_FILE")
|
||||
minified=$(wc -c <"$OUT_FILE")
|
||||
saved=$((original - minified))
|
||||
percent=$((saved * 100 / original))
|
||||
|
||||
echo ""
|
||||
echo " Compression statistics:"
|
||||
printf " Original: %6d bytes\n" "$original"
|
||||
printf " Minified: %6d bytes\n" "$minified"
|
||||
printf " Saved: %6d bytes (%d%%)\n" "$saved" "$percent"
|
||||
echo " ${filename} ready for production"
|
||||
}
|
||||
|
||||
echo "Starting HTML minification..."
|
||||
|
||||
for file in "${FILES[@]}"; do
|
||||
minify_file "$file"
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "All files minified successfully!"
|
||||
echo ""
|
||||
193
assets/web/ontoref-logo.svg
Normal file
193
assets/web/ontoref-logo.svg
Normal file
@ -0,0 +1,193 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
273
assets/web/protocol-flow-dark.svg
Normal file
273
assets/web/protocol-flow-dark.svg
Normal file
@ -0,0 +1,273 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="578" viewBox="0 0 900 578">
|
||||
<defs>
|
||||
<marker id="a" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#475569"/>
|
||||
</marker>
|
||||
<marker id="ab" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#60a5fa"/>
|
||||
</marker>
|
||||
<marker id="ao" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#E8A838"/>
|
||||
</marker>
|
||||
<marker id="ag" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#4ade80"/>
|
||||
</marker>
|
||||
<marker id="ar" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#f87171"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="900" height="578" fill="#0f172a"/>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
SECTION 1 — PROTOCOL LAYERS
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
|
||||
<!-- section label -->
|
||||
<text x="30" y="20" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#334155" letter-spacing="2" font-weight="700">PROTOCOL LAYERS</text>
|
||||
|
||||
<!-- Left connector spine (dashed) -->
|
||||
<line x1="31.5" y1="30" x2="31.5" y2="298" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="3 3"/>
|
||||
|
||||
<!-- ── L1: DECLARATIVE / NICKEL ── y=30 -->
|
||||
<rect x="28" y="30" width="844" height="40" rx="3" fill="#60a5fa" fill-opacity="0.07" stroke="#60a5fa" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="30" width="3" height="40" rx="1" fill="#60a5fa"/>
|
||||
<text x="40" y="46" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700" letter-spacing="1.5">DECLARATIVE · NICKEL</text>
|
||||
<text x="40" y="60" font-family="'JetBrains Mono',monospace" font-size="7" fill="#60a5fa" fill-opacity="0.6">type-safe contracts · fails at definition time</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="36" width="52" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="248" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">.ontology/</text>
|
||||
<rect x="280" y="36" width="46" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="303" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">adrs/*.ncl</text>
|
||||
<rect x="332" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="360" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">modes/*.ncl</text>
|
||||
<rect x="394" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="422" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">schemas/*.ncl</text>
|
||||
<rect x="456" y="36" width="40" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="476" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">qa.ncl</text>
|
||||
<rect x="502" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="530" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">config.ncl</text>
|
||||
<!-- inter-layer arrow + label -->
|
||||
<line x1="31.5" y1="70" x2="31.5" y2="77" stroke="#60a5fa" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ab)"/>
|
||||
<text x="42" y="76" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#334155" letter-spacing="0.5">nickel export → JSON</text>
|
||||
|
||||
<!-- ── L2: KNOWLEDGE GRAPH ── y=80 -->
|
||||
<rect x="28" y="80" width="844" height="40" rx="3" fill="#c084fc" fill-opacity="0.07" stroke="#c084fc" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="80" width="3" height="40" rx="1" fill="#c084fc"/>
|
||||
<text x="40" y="96" font-family="'JetBrains Mono',monospace" font-size="8" fill="#c084fc" font-weight="700" letter-spacing="1.5">KNOWLEDGE GRAPH · .ontology/</text>
|
||||
<text x="40" y="110" font-family="'JetBrains Mono',monospace" font-size="7" fill="#c084fc" fill-opacity="0.6">self-describing · actor-agnostic · machine-queryable</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="86" width="42" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="243" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">axioms</text>
|
||||
<rect x="270" y="86" width="46" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="293" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">tensions</text>
|
||||
<rect x="322" y="86" width="52" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="348" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">practices</text>
|
||||
<rect x="380" y="86" width="62" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="411" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">nodes + edges</text>
|
||||
<rect x="448" y="86" width="50" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="473" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">invariants</text>
|
||||
<rect x="504" y="86" width="34" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="521" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">gates</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="120" x2="31.5" y2="127" stroke="#f97316" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<text x="42" y="126" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#334155" letter-spacing="0.5">reads KG via nickel export</text>
|
||||
|
||||
<!-- ── L3: OPERATIONAL / NUSHELL ── y=130 -->
|
||||
<rect x="28" y="130" width="844" height="40" rx="3" fill="#f97316" fill-opacity="0.07" stroke="#f97316" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="130" width="3" height="40" rx="1" fill="#f97316"/>
|
||||
<text x="40" y="146" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700" letter-spacing="1.5">OPERATIONAL · NUSHELL</text>
|
||||
<text x="40" y="160" font-family="'JetBrains Mono',monospace" font-size="7" fill="#f97316" fill-opacity="0.6">16 modules · DAG-validated modes · typed pipelines</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="136" width="40" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="242" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">adr.nu</text>
|
||||
<rect x="268" y="136" width="52" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="294" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">backlog.nu</text>
|
||||
<rect x="326" y="136" width="54" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="353" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">describe.nu</text>
|
||||
<rect x="386" y="136" width="44" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="408" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">sync.nu</text>
|
||||
<rect x="436" y="136" width="46" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="459" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">coder.nu</text>
|
||||
<rect x="488" y="136" width="54" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="515" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">+11 modules</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="170" x2="31.5" y2="177" stroke="#4ade80" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ag)"/>
|
||||
<text x="42" y="176" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#334155" letter-spacing="0.5">dispatches command + actor</text>
|
||||
|
||||
<!-- ── L4: ENTRY POINT / BASH→NU ── y=180 -->
|
||||
<rect x="28" y="180" width="844" height="40" rx="3" fill="#4ade80" fill-opacity="0.07" stroke="#4ade80" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="180" width="3" height="40" rx="1" fill="#4ade80"/>
|
||||
<text x="40" y="196" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700" letter-spacing="1.5">ENTRY POINT · BASH → NU</text>
|
||||
<text x="40" y="210" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4ade80" fill-opacity="0.6">actor detect · advisory lock · NICKEL_IMPORT_PATH</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="186" width="52" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="248" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">./ontoref</text>
|
||||
<rect x="280" y="186" width="62" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="311" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">actor detect</text>
|
||||
<rect x="348" y="186" width="64" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="380" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">advisory lock</text>
|
||||
<rect x="418" y="186" width="62" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="449" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">→ ontoref.nu</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="220" x2="31.5" y2="227" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="42" y="226" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#334155" letter-spacing="0.5">optional · caches · serves · never required</text>
|
||||
|
||||
<!-- ── L5: RUNTIME / RUST + axum ── y=230 -->
|
||||
<rect x="28" y="230" width="844" height="40" rx="3" fill="#22d3ee" fill-opacity="0.07" stroke="#22d3ee" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="230" width="3" height="40" rx="1" fill="#22d3ee"/>
|
||||
<text x="40" y="246" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700" letter-spacing="1.5">RUNTIME · RUST + axum (optional daemon)</text>
|
||||
<text x="40" y="260" font-family="'JetBrains Mono',monospace" font-size="7" fill="#22d3ee" fill-opacity="0.6">10 UI pages · 19 MCP tools · actor registry · search · SurrealDB?</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="236" width="76" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="260" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">ontoref-daemon</text>
|
||||
<rect x="304" y="236" width="56" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="332" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">axum HTTP</text>
|
||||
<rect x="366" y="236" width="46" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="389" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">MCP ×19</text>
|
||||
<rect x="418" y="236" width="46" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="441" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">DashMap</text>
|
||||
<rect x="470" y="236" width="38" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="489" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">search</text>
|
||||
<rect x="514" y="236" width="56" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="542" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">SurrealDB?</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="270" x2="31.5" y2="277" stroke="#facc15" stroke-opacity="0.4" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="42" y="276" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#334155" letter-spacing="0.5">configures · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- ── L6: ADOPTION ── y=280 -->
|
||||
<rect x="28" y="280" width="844" height="40" rx="3" fill="#facc15" fill-opacity="0.07" stroke="#facc15" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="280" width="3" height="40" rx="1" fill="#facc15"/>
|
||||
<text x="40" y="296" font-family="'JetBrains Mono',monospace" font-size="8" fill="#facc15" font-weight="700" letter-spacing="1.5">ADOPTION · PER-PROJECT</text>
|
||||
<text x="40" y="310" font-family="'JetBrains Mono',monospace" font-size="7" fill="#facc15" fill-opacity="0.6">templates/ · one ontoref checkout · zero lock-in</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="286" width="56" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="250" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">templates/</text>
|
||||
<rect x="284" y="286" width="74" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="321" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">adopt_ontoref</text>
|
||||
<rect x="364" y="286" width="108" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="418" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">ONTOREF_PROJECT_ROOT</text>
|
||||
<rect x="478" y="286" width="62" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="509" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">zero lock-in</text>
|
||||
<rect x="546" y="286" width="58" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="575" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">plain NCL</text>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
DIVIDER
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
<line x1="28" y1="334" x2="872" y2="334" stroke="#1e293b" stroke-width="1"/>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
SECTION 2 — REQUEST FLOWS
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
<text x="30" y="348" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#334155" letter-spacing="2" font-weight="700">REQUEST FLOWS</text>
|
||||
|
||||
<!-- ── FLOW 1: CLI ── -->
|
||||
<text x="30" y="366" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#475569">CLI path — developer · agent · CI</text>
|
||||
|
||||
<!-- node helper: rounded rect + label + sublabel -->
|
||||
<!-- Node: Actor -->
|
||||
<rect x="30" y="372" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">Actor</text>
|
||||
<text x="80" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">dev · agent · CI</text>
|
||||
<!-- arrow -->
|
||||
<line x1="130" y1="390" x2="156" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: ./ontoref -->
|
||||
<rect x="158" y="372" width="100" height="36" rx="4" fill="#4ade80" fill-opacity="0.1" stroke="#4ade80" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="208" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700">./ontoref</text>
|
||||
<text x="208" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#4ade80" fill-opacity="0.7">bash wrapper</text>
|
||||
<!-- arrow + lock label -->
|
||||
<line x1="258" y1="390" x2="284" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="271" y="387" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#334155">lock</text>
|
||||
<!-- Node: ontoref.nu -->
|
||||
<rect x="286" y="372" width="100" height="36" rx="4" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="336" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700">ontoref.nu</text>
|
||||
<text x="336" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f97316" fill-opacity="0.7">Nu dispatcher</text>
|
||||
<!-- arrow -->
|
||||
<line x1="386" y1="390" x2="412" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: module.nu -->
|
||||
<rect x="414" y="372" width="100" height="36" rx="4" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="464" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700">module.nu</text>
|
||||
<text x="464" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f97316" fill-opacity="0.7">adr · backlog · etc</text>
|
||||
<!-- arrow + nickel label -->
|
||||
<line x1="514" y1="390" x2="540" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="527" y="387" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#334155">export</text>
|
||||
<!-- Node: .ontology/ -->
|
||||
<rect x="542" y="372" width="100" height="36" rx="4" fill="#c084fc" fill-opacity="0.1" stroke="#c084fc" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="592" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#c084fc" font-weight="700">.ontology/</text>
|
||||
<text x="592" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#c084fc" fill-opacity="0.7">nickel export</text>
|
||||
<!-- arrow -->
|
||||
<line x1="642" y1="390" x2="668" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: reflection/ -->
|
||||
<rect x="670" y="372" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="720" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">reflection/</text>
|
||||
<text x="720" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">qa.ncl · backlog</text>
|
||||
<!-- daemon optional branch (dashed, from ontoref.nu node bottom) -->
|
||||
<line x1="336" y1="408" x2="336" y2="420" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="0.8" stroke-dasharray="3 2"/>
|
||||
<rect x="286" y="420" width="100" height="22" rx="3" fill="#22d3ee" fill-opacity="0.07" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.7"/>
|
||||
<text x="336" y="435" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">daemon? (optional)</text>
|
||||
|
||||
<!-- ── FLOW 2: MCP / AI AGENT ── -->
|
||||
<text x="30" y="462" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#475569">MCP path — AI agent · Claude Code · any MCP client</text>
|
||||
<!-- Node: AI Agent -->
|
||||
<rect x="30" y="468" width="100" height="36" rx="4" fill="#E8A838" fill-opacity="0.1" stroke="#E8A838" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#E8A838" font-weight="700">AI Agent</text>
|
||||
<text x="80" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#E8A838" fill-opacity="0.7">Claude · any MCP</text>
|
||||
<!-- arrow -->
|
||||
<line x1="130" y1="486" x2="156" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: MCP server -->
|
||||
<rect x="158" y="468" width="110" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="213" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">MCP server</text>
|
||||
<text x="213" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">stdio · HTTP /mcp</text>
|
||||
<!-- arrow -->
|
||||
<line x1="268" y1="486" x2="294" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: 19 tools -->
|
||||
<rect x="296" y="468" width="100" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="346" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">19 tools</text>
|
||||
<text x="346" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">read · write · query</text>
|
||||
<!-- arrow -->
|
||||
<line x1="396" y1="486" x2="422" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: NCL files -->
|
||||
<rect x="424" y="468" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="474" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">NCL files</text>
|
||||
<text x="474" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">git-versioned</text>
|
||||
|
||||
<!-- ── FLOW 3: PRE-COMMIT BARRIER ── -->
|
||||
<text x="30" y="524" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#475569">Pre-commit barrier — notification-gated commit path</text>
|
||||
<!-- Node: git commit -->
|
||||
<rect x="30" y="530" width="100" height="36" rx="4" fill="#f87171" fill-opacity="0.1" stroke="#f87171" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f87171" font-weight="700">git commit</text>
|
||||
<text x="80" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f87171" fill-opacity="0.7">pre-commit fires</text>
|
||||
<!-- warn arrow -->
|
||||
<line x1="130" y1="548" x2="156" y2="548" stroke="#f97316" stroke-opacity="0.7" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<!-- Node: GET /notifications -->
|
||||
<rect x="158" y="530" width="120" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="218" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">GET /notify</text>
|
||||
<text x="218" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">/pending?token=X</text>
|
||||
<!-- arrow -->
|
||||
<line x1="278" y1="548" x2="304" y2="548" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Diamond: pending? -->
|
||||
<polygon points="330,530 356,548 330,566 304,548" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="330" y="552" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7" fill="#f97316" font-weight="700">pending?</text>
|
||||
<!-- YES arrow (right) -->
|
||||
<line x1="356" y1="548" x2="382" y2="548" stroke="#f97316" stroke-opacity="0.7" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<text x="369" y="545" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#f87171">YES</text>
|
||||
<!-- Node: BLOCK -->
|
||||
<rect x="384" y="530" width="100" height="36" rx="4" fill="#f87171" fill-opacity="0.12" stroke="#f87171" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="434" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f87171" font-weight="700">BLOCK</text>
|
||||
<text x="434" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f87171" fill-opacity="0.7">until acked in UI</text>
|
||||
<!-- NO arc (down from diamond then right to pass) -->
|
||||
<path d="M330,566 Q330,578 345,578 L520,578 Q535,578 535,566 L535,566" fill="none" stroke="#4ade80" stroke-opacity="0.4" stroke-width="0.8" stroke-dasharray="3 2" marker-end="url(#ag)"/>
|
||||
<text x="432" y="576" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#4ade80" fill-opacity="0.7">NO — daemon unreachable → fail-open</text>
|
||||
<!-- arrow from BLOCK -->
|
||||
<line x1="484" y1="548" x2="510" y2="548" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="497" y="545" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#4ade80">acked</text>
|
||||
<!-- Node: PASS -->
|
||||
<rect x="512" y="530" width="100" height="36" rx="4" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="562" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700">PASS ✓</text>
|
||||
<text x="562" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#4ade80" fill-opacity="0.7">commit proceeds</text>
|
||||
|
||||
<!-- footer -->
|
||||
<text x="872" y="574" text-anchor="end" font-family="'JetBrains Mono',monospace" font-size="7" fill="#1e293b">ontoref v0.1.0</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
273
assets/web/protocol-flow-light.svg
Normal file
273
assets/web/protocol-flow-light.svg
Normal file
@ -0,0 +1,273 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="578" viewBox="0 0 900 578">
|
||||
<defs>
|
||||
<marker id="a" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#64748b"/>
|
||||
</marker>
|
||||
<marker id="ab" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#60a5fa"/>
|
||||
</marker>
|
||||
<marker id="ao" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#E8A838"/>
|
||||
</marker>
|
||||
<marker id="ag" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#4ade80"/>
|
||||
</marker>
|
||||
<marker id="ar" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
|
||||
<polygon points="0 0,7 2.5,0 5" fill="#f87171"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="900" height="578" fill="#f8fafc"/>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
SECTION 1 — PROTOCOL LAYERS
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
|
||||
<!-- section label -->
|
||||
<text x="30" y="20" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#94a3b8" letter-spacing="2" font-weight="700">PROTOCOL LAYERS</text>
|
||||
|
||||
<!-- Left connector spine (dashed) -->
|
||||
<line x1="31.5" y1="30" x2="31.5" y2="298" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 3"/>
|
||||
|
||||
<!-- ── L1: DECLARATIVE / NICKEL ── y=30 -->
|
||||
<rect x="28" y="30" width="844" height="40" rx="3" fill="#60a5fa" fill-opacity="0.07" stroke="#60a5fa" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="30" width="3" height="40" rx="1" fill="#60a5fa"/>
|
||||
<text x="40" y="46" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700" letter-spacing="1.5">DECLARATIVE · NICKEL</text>
|
||||
<text x="40" y="60" font-family="'JetBrains Mono',monospace" font-size="7" fill="#60a5fa" fill-opacity="0.6">type-safe contracts · fails at definition time</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="36" width="52" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="248" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">.ontology/</text>
|
||||
<rect x="280" y="36" width="46" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="303" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">adrs/*.ncl</text>
|
||||
<rect x="332" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="360" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">modes/*.ncl</text>
|
||||
<rect x="394" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="422" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">schemas/*.ncl</text>
|
||||
<rect x="456" y="36" width="40" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="476" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">qa.ncl</text>
|
||||
<rect x="502" y="36" width="56" height="16" rx="3" fill="#60a5fa" fill-opacity="0.12" stroke="#60a5fa" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="530" y="47" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#60a5fa">config.ncl</text>
|
||||
<!-- inter-layer arrow + label -->
|
||||
<line x1="31.5" y1="70" x2="31.5" y2="77" stroke="#60a5fa" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ab)"/>
|
||||
<text x="42" y="76" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#94a3b8" letter-spacing="0.5">nickel export → JSON</text>
|
||||
|
||||
<!-- ── L2: KNOWLEDGE GRAPH ── y=80 -->
|
||||
<rect x="28" y="80" width="844" height="40" rx="3" fill="#c084fc" fill-opacity="0.07" stroke="#c084fc" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="80" width="3" height="40" rx="1" fill="#c084fc"/>
|
||||
<text x="40" y="96" font-family="'JetBrains Mono',monospace" font-size="8" fill="#c084fc" font-weight="700" letter-spacing="1.5">KNOWLEDGE GRAPH · .ontology/</text>
|
||||
<text x="40" y="110" font-family="'JetBrains Mono',monospace" font-size="7" fill="#c084fc" fill-opacity="0.6">self-describing · actor-agnostic · machine-queryable</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="86" width="42" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="243" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">axioms</text>
|
||||
<rect x="270" y="86" width="46" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="293" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">tensions</text>
|
||||
<rect x="322" y="86" width="52" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="348" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">practices</text>
|
||||
<rect x="380" y="86" width="62" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="411" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">nodes + edges</text>
|
||||
<rect x="448" y="86" width="50" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="473" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">invariants</text>
|
||||
<rect x="504" y="86" width="34" height="16" rx="3" fill="#c084fc" fill-opacity="0.12" stroke="#c084fc" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="521" y="97" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#c084fc">gates</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="120" x2="31.5" y2="127" stroke="#f97316" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<text x="42" y="126" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#94a3b8" letter-spacing="0.5">reads KG via nickel export</text>
|
||||
|
||||
<!-- ── L3: OPERATIONAL / NUSHELL ── y=130 -->
|
||||
<rect x="28" y="130" width="844" height="40" rx="3" fill="#f97316" fill-opacity="0.07" stroke="#f97316" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="130" width="3" height="40" rx="1" fill="#f97316"/>
|
||||
<text x="40" y="146" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700" letter-spacing="1.5">OPERATIONAL · NUSHELL</text>
|
||||
<text x="40" y="160" font-family="'JetBrains Mono',monospace" font-size="7" fill="#f97316" fill-opacity="0.6">16 modules · DAG-validated modes · typed pipelines</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="136" width="40" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="242" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">adr.nu</text>
|
||||
<rect x="268" y="136" width="52" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="294" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">backlog.nu</text>
|
||||
<rect x="326" y="136" width="54" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="353" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">describe.nu</text>
|
||||
<rect x="386" y="136" width="44" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="408" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">sync.nu</text>
|
||||
<rect x="436" y="136" width="46" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="459" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">coder.nu</text>
|
||||
<rect x="488" y="136" width="54" height="16" rx="3" fill="#f97316" fill-opacity="0.12" stroke="#f97316" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="515" y="147" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#f97316">+11 modules</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="170" x2="31.5" y2="177" stroke="#4ade80" stroke-opacity="0.4" stroke-width="1" marker-end="url(#ag)"/>
|
||||
<text x="42" y="176" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#94a3b8" letter-spacing="0.5">dispatches command + actor</text>
|
||||
|
||||
<!-- ── L4: ENTRY POINT / BASH→NU ── y=180 -->
|
||||
<rect x="28" y="180" width="844" height="40" rx="3" fill="#4ade80" fill-opacity="0.07" stroke="#4ade80" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="180" width="3" height="40" rx="1" fill="#4ade80"/>
|
||||
<text x="40" y="196" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700" letter-spacing="1.5">ENTRY POINT · BASH → NU</text>
|
||||
<text x="40" y="210" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4ade80" fill-opacity="0.6">actor detect · advisory lock · NICKEL_IMPORT_PATH</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="186" width="52" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="248" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">./ontoref</text>
|
||||
<rect x="280" y="186" width="62" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="311" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">actor detect</text>
|
||||
<rect x="348" y="186" width="64" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="380" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">advisory lock</text>
|
||||
<rect x="418" y="186" width="62" height="16" rx="3" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="449" y="197" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#4ade80">→ ontoref.nu</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="220" x2="31.5" y2="227" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="42" y="226" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#94a3b8" letter-spacing="0.5">optional · caches · serves · never required</text>
|
||||
|
||||
<!-- ── L5: RUNTIME / RUST + axum ── y=230 -->
|
||||
<rect x="28" y="230" width="844" height="40" rx="3" fill="#22d3ee" fill-opacity="0.07" stroke="#22d3ee" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="230" width="3" height="40" rx="1" fill="#22d3ee"/>
|
||||
<text x="40" y="246" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700" letter-spacing="1.5">RUNTIME · RUST + axum (optional daemon)</text>
|
||||
<text x="40" y="260" font-family="'JetBrains Mono',monospace" font-size="7" fill="#22d3ee" fill-opacity="0.6">10 UI pages · 19 MCP tools · actor registry · search · SurrealDB?</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="236" width="76" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="260" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">ontoref-daemon</text>
|
||||
<rect x="304" y="236" width="56" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="332" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">axum HTTP</text>
|
||||
<rect x="366" y="236" width="46" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="389" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">MCP ×19</text>
|
||||
<rect x="418" y="236" width="46" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="441" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">DashMap</text>
|
||||
<rect x="470" y="236" width="38" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="489" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">search</text>
|
||||
<rect x="514" y="236" width="56" height="16" rx="3" fill="#22d3ee" fill-opacity="0.12" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="542" y="247" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#22d3ee">SurrealDB?</text>
|
||||
<!-- inter-layer arrow -->
|
||||
<line x1="31.5" y1="270" x2="31.5" y2="277" stroke="#facc15" stroke-opacity="0.4" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="42" y="276" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#94a3b8" letter-spacing="0.5">configures · ONTOREF_PROJECT_ROOT</text>
|
||||
|
||||
<!-- ── L6: ADOPTION ── y=280 -->
|
||||
<rect x="28" y="280" width="844" height="40" rx="3" fill="#facc15" fill-opacity="0.07" stroke="#facc15" stroke-opacity="0.25" stroke-width="0.8"/>
|
||||
<rect x="28" y="280" width="3" height="40" rx="1" fill="#facc15"/>
|
||||
<text x="40" y="296" font-family="'JetBrains Mono',monospace" font-size="8" fill="#facc15" font-weight="700" letter-spacing="1.5">ADOPTION · PER-PROJECT</text>
|
||||
<text x="40" y="310" font-family="'JetBrains Mono',monospace" font-size="7" fill="#facc15" fill-opacity="0.6">templates/ · one ontoref checkout · zero lock-in</text>
|
||||
<!-- chips -->
|
||||
<rect x="222" y="286" width="56" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="250" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">templates/</text>
|
||||
<rect x="284" y="286" width="74" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="321" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">adopt_ontoref</text>
|
||||
<rect x="364" y="286" width="108" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="418" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">ONTOREF_PROJECT_ROOT</text>
|
||||
<rect x="478" y="286" width="62" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="509" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">zero lock-in</text>
|
||||
<rect x="546" y="286" width="58" height="16" rx="3" fill="#facc15" fill-opacity="0.12" stroke="#facc15" stroke-width="0.5" stroke-opacity="0.4"/>
|
||||
<text x="575" y="297" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#facc15">plain NCL</text>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
DIVIDER
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
<line x1="28" y1="334" x2="872" y2="334" stroke="#cbd5e1" stroke-width="1"/>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════════
|
||||
SECTION 2 — REQUEST FLOWS
|
||||
══════════════════════════════════════════════════════════════ -->
|
||||
<text x="30" y="348" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#94a3b8" letter-spacing="2" font-weight="700">REQUEST FLOWS</text>
|
||||
|
||||
<!-- ── FLOW 1: CLI ── -->
|
||||
<text x="30" y="366" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#64748b">CLI path — developer · agent · CI</text>
|
||||
|
||||
<!-- node helper: rounded rect + label + sublabel -->
|
||||
<!-- Node: Actor -->
|
||||
<rect x="30" y="372" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">Actor</text>
|
||||
<text x="80" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">dev · agent · CI</text>
|
||||
<!-- arrow -->
|
||||
<line x1="130" y1="390" x2="156" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: ./ontoref -->
|
||||
<rect x="158" y="372" width="100" height="36" rx="4" fill="#4ade80" fill-opacity="0.1" stroke="#4ade80" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="208" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700">./ontoref</text>
|
||||
<text x="208" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#4ade80" fill-opacity="0.7">bash wrapper</text>
|
||||
<!-- arrow + lock label -->
|
||||
<line x1="258" y1="390" x2="284" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="271" y="387" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#94a3b8">lock</text>
|
||||
<!-- Node: ontoref.nu -->
|
||||
<rect x="286" y="372" width="100" height="36" rx="4" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="336" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700">ontoref.nu</text>
|
||||
<text x="336" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f97316" fill-opacity="0.7">Nu dispatcher</text>
|
||||
<!-- arrow -->
|
||||
<line x1="386" y1="390" x2="412" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: module.nu -->
|
||||
<rect x="414" y="372" width="100" height="36" rx="4" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="464" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f97316" font-weight="700">module.nu</text>
|
||||
<text x="464" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f97316" fill-opacity="0.7">adr · backlog · etc</text>
|
||||
<!-- arrow + nickel label -->
|
||||
<line x1="514" y1="390" x2="540" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="527" y="387" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#94a3b8">export</text>
|
||||
<!-- Node: .ontology/ -->
|
||||
<rect x="542" y="372" width="100" height="36" rx="4" fill="#c084fc" fill-opacity="0.1" stroke="#c084fc" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="592" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#c084fc" font-weight="700">.ontology/</text>
|
||||
<text x="592" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#c084fc" fill-opacity="0.7">nickel export</text>
|
||||
<!-- arrow -->
|
||||
<line x1="642" y1="390" x2="668" y2="390" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: reflection/ -->
|
||||
<rect x="670" y="372" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="720" y="386" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">reflection/</text>
|
||||
<text x="720" y="398" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">qa.ncl · backlog</text>
|
||||
<!-- daemon optional branch (dashed, from ontoref.nu node bottom) -->
|
||||
<line x1="336" y1="408" x2="336" y2="420" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="0.8" stroke-dasharray="3 2"/>
|
||||
<rect x="286" y="420" width="100" height="22" rx="3" fill="#22d3ee" fill-opacity="0.07" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.7"/>
|
||||
<text x="336" y="435" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">daemon? (optional)</text>
|
||||
|
||||
<!-- ── FLOW 2: MCP / AI AGENT ── -->
|
||||
<text x="30" y="462" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#64748b">MCP path — AI agent · Claude Code · any MCP client</text>
|
||||
<!-- Node: AI Agent -->
|
||||
<rect x="30" y="468" width="100" height="36" rx="4" fill="#E8A838" fill-opacity="0.1" stroke="#E8A838" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#E8A838" font-weight="700">AI Agent</text>
|
||||
<text x="80" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#E8A838" fill-opacity="0.7">Claude · any MCP</text>
|
||||
<!-- arrow -->
|
||||
<line x1="130" y1="486" x2="156" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: MCP server -->
|
||||
<rect x="158" y="468" width="110" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="213" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">MCP server</text>
|
||||
<text x="213" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">stdio · HTTP /mcp</text>
|
||||
<!-- arrow -->
|
||||
<line x1="268" y1="486" x2="294" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: 19 tools -->
|
||||
<rect x="296" y="468" width="100" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="346" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">19 tools</text>
|
||||
<text x="346" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">read · write · query</text>
|
||||
<!-- arrow -->
|
||||
<line x1="396" y1="486" x2="422" y2="486" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Node: NCL files -->
|
||||
<rect x="424" y="468" width="100" height="36" rx="4" fill="#60a5fa" fill-opacity="0.1" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="474" y="482" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#60a5fa" font-weight="700">NCL files</text>
|
||||
<text x="474" y="494" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#60a5fa" fill-opacity="0.7">git-versioned</text>
|
||||
|
||||
<!-- ── FLOW 3: PRE-COMMIT BARRIER ── -->
|
||||
<text x="30" y="524" font-family="'JetBrains Mono',monospace" font-size="7.5" fill="#64748b">Pre-commit barrier — notification-gated commit path</text>
|
||||
<!-- Node: git commit -->
|
||||
<rect x="30" y="530" width="100" height="36" rx="4" fill="#f87171" fill-opacity="0.1" stroke="#f87171" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="80" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f87171" font-weight="700">git commit</text>
|
||||
<text x="80" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f87171" fill-opacity="0.7">pre-commit fires</text>
|
||||
<!-- warn arrow -->
|
||||
<line x1="130" y1="548" x2="156" y2="548" stroke="#f97316" stroke-opacity="0.7" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<!-- Node: GET /notifications -->
|
||||
<rect x="158" y="530" width="120" height="36" rx="4" fill="#22d3ee" fill-opacity="0.1" stroke="#22d3ee" stroke-opacity="0.5" stroke-width="1"/>
|
||||
<text x="218" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#22d3ee" font-weight="700">GET /notify</text>
|
||||
<text x="218" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#22d3ee" fill-opacity="0.7">/pending?token=X</text>
|
||||
<!-- arrow -->
|
||||
<line x1="278" y1="548" x2="304" y2="548" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<!-- Diamond: pending? -->
|
||||
<polygon points="330,530 356,548 330,566 304,548" fill="#f97316" fill-opacity="0.1" stroke="#f97316" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="330" y="552" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="7" fill="#f97316" font-weight="700">pending?</text>
|
||||
<!-- YES arrow (right) -->
|
||||
<line x1="356" y1="548" x2="382" y2="548" stroke="#f97316" stroke-opacity="0.7" stroke-width="1" marker-end="url(#ao)"/>
|
||||
<text x="369" y="545" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#f87171">YES</text>
|
||||
<!-- Node: BLOCK -->
|
||||
<rect x="384" y="530" width="100" height="36" rx="4" fill="#f87171" fill-opacity="0.12" stroke="#f87171" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="434" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f87171" font-weight="700">BLOCK</text>
|
||||
<text x="434" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#f87171" fill-opacity="0.7">until acked in UI</text>
|
||||
<!-- NO arc (down from diamond then right to pass) -->
|
||||
<path d="M330,566 Q330,578 345,578 L520,578 Q535,578 535,566 L535,566" fill="none" stroke="#4ade80" stroke-opacity="0.4" stroke-width="0.8" stroke-dasharray="3 2" marker-end="url(#ag)"/>
|
||||
<text x="432" y="576" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#4ade80" fill-opacity="0.7">NO — daemon unreachable → fail-open</text>
|
||||
<!-- arrow from BLOCK -->
|
||||
<line x1="484" y1="548" x2="510" y2="548" stroke="#475569" stroke-width="1" marker-end="url(#a)"/>
|
||||
<text x="497" y="545" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="5.5" fill="#4ade80">acked</text>
|
||||
<!-- Node: PASS -->
|
||||
<rect x="512" y="530" width="100" height="36" rx="4" fill="#4ade80" fill-opacity="0.12" stroke="#4ade80" stroke-opacity="0.6" stroke-width="1"/>
|
||||
<text x="562" y="544" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4ade80" font-weight="700">PASS ✓</text>
|
||||
<text x="562" y="556" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="#4ade80" fill-opacity="0.7">commit proceeds</text>
|
||||
|
||||
<!-- footer -->
|
||||
<text x="872" y="574" text-anchor="end" font-family="'JetBrains Mono',monospace" font-size="7" fill="#94a3b8">ontoref v0.1.0</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
838
assets/web/src/architecture-diagram-details.html
Normal file
838
assets/web/src/architecture-diagram-details.html
Normal file
@ -0,0 +1,838 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ontoref — Architecture</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--bg2: #1e293b;
|
||||
--bg3: #0a0f1e;
|
||||
--text: #e2e8f0;
|
||||
--muted: #64748b;
|
||||
--subtle: #334155;
|
||||
--blue: #60a5fa;
|
||||
--orange: #E8A838;
|
||||
--green: #4ade80;
|
||||
--purple: #c084fc;
|
||||
--teal: #22d3ee;
|
||||
--yellow: #facc15;
|
||||
--red: #f87171;
|
||||
--border: rgba(96,165,250,0.2);
|
||||
}
|
||||
html.light {
|
||||
--bg: #f8fafc;
|
||||
--bg2: #f1f5f9;
|
||||
--bg3: #e2e8f0;
|
||||
--text: #0f172a;
|
||||
--muted: #64748b;
|
||||
--subtle: #cbd5e1;
|
||||
--border: rgba(96,165,250,0.35);
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
padding: 2rem;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
/* ── Nav ── */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 1.5rem; right: 1.5rem;
|
||||
z-index: 100;
|
||||
display: flex; gap: 0.4rem; align-items: center;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 0.3rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.nav a, .nav button {
|
||||
background: transparent; border: none;
|
||||
color: var(--muted);
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav a:hover, .nav button:hover { color: var(--blue); }
|
||||
.nav .back {
|
||||
background: rgba(96,165,250,0.12);
|
||||
color: var(--blue);
|
||||
border: 1px solid rgba(96,165,250,0.3);
|
||||
}
|
||||
.nav .back:hover { background: rgba(96,165,250,0.2); }
|
||||
/* ── Layout ── */
|
||||
.page { max-width: 1200px; margin: 0 auto; }
|
||||
.page-title {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.page-title h1 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.page-title p { color: var(--muted); font-size: 0.95rem; }
|
||||
|
||||
/* ── Layer stack ── */
|
||||
.arch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.layer {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.layer-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.layer-body {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.layer-body .items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.chip {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.72rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid var(--subtle);
|
||||
color: var(--muted);
|
||||
}
|
||||
.layer-body .desc {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Layer colours */
|
||||
.l-declarative .layer-tag { background: rgba(96,165,250,0.08); color: var(--blue); border-color: rgba(96,165,250,0.2); }
|
||||
.l-declarative .layer-body { background: rgba(96,165,250,0.03); }
|
||||
.l-operational .layer-tag { background: rgba(232,168,56,0.08); color: var(--orange); border-color: rgba(232,168,56,0.2); }
|
||||
.l-operational .layer-body { background: rgba(232,168,56,0.02); }
|
||||
.l-entry .layer-tag { background: rgba(74,222,128,0.08); color: var(--green); border-color: rgba(74,222,128,0.2); }
|
||||
.l-entry .layer-body { background: rgba(74,222,128,0.02); }
|
||||
.l-graph .layer-tag { background: rgba(192,132,252,0.08); color: var(--purple); border-color: rgba(192,132,252,0.2); }
|
||||
.l-graph .layer-body { background: rgba(192,132,252,0.02); }
|
||||
.l-runtime .layer-tag { background: rgba(34,211,238,0.08); color: var(--teal); border-color: rgba(34,211,238,0.2); }
|
||||
.l-runtime .layer-body { background: rgba(34,211,238,0.02); }
|
||||
.l-adopt .layer-tag { background: rgba(250,204,21,0.08); color: var(--yellow); border-color: rgba(250,204,21,0.2); }
|
||||
.l-adopt .layer-body { background: rgba(250,204,21,0.02); }
|
||||
|
||||
/* ── Daemon Components 5-col grid ── */
|
||||
.daemon-detail {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.daemon-detail .span2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.daemon-box {
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg2);
|
||||
}
|
||||
.daemon-box h3 {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.daemon-box.box-http h3 { color: var(--teal); }
|
||||
.daemon-box.box-mcp h3 { color: var(--blue); }
|
||||
.daemon-box.box-sessions h3 { color: var(--green); }
|
||||
.daemon-box.box-notify h3 { color: var(--orange); }
|
||||
.daemon-box.box-ncl h3 { color: var(--yellow); }
|
||||
|
||||
.daemon-box h3.sub-h {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.route-list { list-style: none; }
|
||||
.route-list li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.route-list li:last-child { border-bottom: none; }
|
||||
.method {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
min-width: 2.8rem;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.method.get { background: rgba(74,222,128,0.15); color: var(--green); }
|
||||
.method.post { background: rgba(96,165,250,0.15); color: var(--blue); }
|
||||
.route-path {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: var(--text);
|
||||
font-size: 0.72rem;
|
||||
flex: 1;
|
||||
}
|
||||
.route-desc { color: var(--muted); font-size: 0.68rem; }
|
||||
|
||||
.tool-list { list-style: none; }
|
||||
.tool-list li {
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
.tool-list li:last-child { border-bottom: none; }
|
||||
.tool-name {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: var(--blue);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.tool-desc { color: var(--muted); font-size: 0.68rem; }
|
||||
|
||||
/* ── Flow diagram ── */
|
||||
.flow-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.flow-section h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.flow-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.flow-row-label {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 0.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
.flow-node {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0.8rem 1.2rem;
|
||||
text-align: center;
|
||||
min-width: 100px;
|
||||
}
|
||||
.flow-node .fn-label {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.flow-node .fn-sub {
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.flow-arrow {
|
||||
color: var(--subtle);
|
||||
font-size: 1.4rem;
|
||||
padding: 0 0.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flow-arrow.warn { color: var(--orange); }
|
||||
.fn-actor .fn-label { color: var(--green); }
|
||||
.fn-cli .fn-label { color: var(--yellow); }
|
||||
.fn-daemon .fn-label { color: var(--teal); }
|
||||
.fn-mcp .fn-label { color: var(--blue); }
|
||||
.fn-ncl .fn-label { color: var(--orange); }
|
||||
.fn-git .fn-label { color: var(--purple); }
|
||||
.fn-hook .fn-label { color: var(--red); }
|
||||
.fn-pass .fn-label { color: var(--green); }
|
||||
|
||||
/* ── Persistence tiers ── */
|
||||
.persistence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.persist-box {
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid;
|
||||
background: var(--bg2);
|
||||
}
|
||||
.persist-box.tier-memory { border-color: rgba(96,165,250,0.25); }
|
||||
.persist-box.tier-surreal { border-color: rgba(34,211,238,0.25); }
|
||||
.persist-box h3 {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.persist-box.tier-memory h3 { color: var(--blue); }
|
||||
.persist-box.tier-surreal h3 { color: var(--teal); }
|
||||
.persist-box .tier-sub {
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
.persist-box ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.9;
|
||||
}
|
||||
.persist-box ul li::before { content: "· "; }
|
||||
.persist-box ul strong { color: var(--text); }
|
||||
.persist-box ul code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
/* ── Constraint callouts ── */
|
||||
.constraints {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.constraint-card {
|
||||
background: var(--bg2);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
border-left: 3px solid;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.constraint-card.hard { border-color: var(--red); }
|
||||
.constraint-card.soft { border-color: var(--yellow); }
|
||||
.constraint-card .c-id {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.constraint-card .c-claim { color: var(--text); line-height: 1.5; }
|
||||
.constraint-card.hard .c-id::before { content: "HARD · "; color: var(--red); }
|
||||
.constraint-card.soft .c-id::before { content: "SOFT · "; color: var(--yellow); }
|
||||
|
||||
/* ── section headers ── */
|
||||
.section-h {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.daemon-detail { grid-template-columns: 1fr 1fr; }
|
||||
.daemon-detail .span2 { grid-column: span 2; }
|
||||
.layer { grid-template-columns: 120px 1fr; }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.daemon-detail { grid-template-columns: 1fr; }
|
||||
.daemon-detail .span2 { grid-column: span 1; }
|
||||
.persistence-grid { grid-template-columns: 1fr; }
|
||||
body { padding: 1rem; padding-top: 5rem; }
|
||||
.layer { grid-template-columns: 1fr; }
|
||||
.layer-tag { border-right: none; border-bottom: 1px solid var(--border); min-height: auto; }
|
||||
.flow-row { gap: 0.5rem; flex-direction: column; }
|
||||
.flow-arrow { transform: rotate(90deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<button onclick="toggleTheme()" id="theme-btn" title="Toggle theme">☀️</button>
|
||||
<a href="index.html" class="back">← Ontoref</a>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
<div class="page-title">
|
||||
<h1>Architecture</h1>
|
||||
<p>Protocol layers, runtime components, data flows, persistence tiers, and active constraints — v0.1.0</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Protocol Layer Stack ── -->
|
||||
<div class="section-h">Protocol Layers</div>
|
||||
<div class="arch">
|
||||
|
||||
<div class="layer l-declarative">
|
||||
<div class="layer-tag">Declarative<br/>Layer<br/>Nickel</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">.ontology/core.ncl</span>
|
||||
<span class="chip">.ontology/state.ncl</span>
|
||||
<span class="chip">adrs/adr-NNN.ncl</span>
|
||||
<span class="chip">reflection/schemas/</span>
|
||||
<span class="chip">reflection/modes/</span>
|
||||
<span class="chip">reflection/forms/</span>
|
||||
<span class="chip">reflection/qa.ncl</span>
|
||||
<span class="chip">.ontoref/config.ncl</span>
|
||||
</div>
|
||||
<div class="desc">Strong types, contracts, enums. Fails at definition time. No runtime evaluation — nickel export produces JSON consumed by all layers above.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer l-graph">
|
||||
<div class="layer-tag">Knowledge<br/>Graph<br/>.ontology/</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">4 axioms</span>
|
||||
<span class="chip">2 tensions</span>
|
||||
<span class="chip">12 practices</span>
|
||||
<span class="chip">nodes + edges</span>
|
||||
<span class="chip">invariants</span>
|
||||
<span class="chip">gates</span>
|
||||
<span class="chip">dimensions</span>
|
||||
</div>
|
||||
<div class="desc">The project knows what it knows. Actor-agnostic. Machine-queryable. ontoref uses its own protocol — the .ontology/ here describes ontoref itself.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer l-operational">
|
||||
<div class="layer-tag">Operational<br/>Layer<br/>Nushell</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">adr.nu</span>
|
||||
<span class="chip">backlog.nu</span>
|
||||
<span class="chip">coder.nu</span>
|
||||
<span class="chip">describe.nu</span>
|
||||
<span class="chip">sync.nu</span>
|
||||
<span class="chip">config.nu</span>
|
||||
<span class="chip">register.nu</span>
|
||||
<span class="chip">forms.nu</span>
|
||||
<span class="chip">+8 more</span>
|
||||
</div>
|
||||
<div class="desc">Typed Nushell pipelines over structured data — no text streams. 16 modules, each responsible for one operational domain. DAG modes validated before execution.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer l-entry">
|
||||
<div class="layer-tag">Entry<br/>Point<br/>Bash → Nu</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">./ontoref</span>
|
||||
<span class="chip">actor detection</span>
|
||||
<span class="chip">advisory locking</span>
|
||||
<span class="chip">NICKEL_IMPORT_PATH</span>
|
||||
<span class="chip">./ontoref -V</span>
|
||||
</div>
|
||||
<div class="desc">Single entry point per project. Detects actor (developer / agent / CI) from flag, env var, or TTY. Acquires mkdir-based POSIX advisory lock per resource. Dispatches to Nu.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer l-runtime">
|
||||
<div class="layer-tag">Runtime<br/>Layer<br/>Rust + axum</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">ontoref-daemon</span>
|
||||
<span class="chip">ontoref-ontology</span>
|
||||
<span class="chip">ontoref-reflection</span>
|
||||
<span class="chip">axum HTTP API</span>
|
||||
<span class="chip">Tera templates</span>
|
||||
<span class="chip">MCP server</span>
|
||||
<span class="chip">DashMap cache</span>
|
||||
<span class="chip">notify watcher</span>
|
||||
<span class="chip">drift observer</span>
|
||||
<span class="chip">search engine</span>
|
||||
<span class="chip">notification store</span>
|
||||
<span class="chip">actor registry</span>
|
||||
<span class="chip">session store</span>
|
||||
<span class="chip">SurrealDB (optional)</span>
|
||||
</div>
|
||||
<div class="desc">Optional persistent daemon. Caches nickel export results (path+mtime keyed). Serves HTTP UI (10 pages) + MCP server (19 tools). Actor registry with DashMap sessions. Notification barrier (pre_commit, drift, ontology_drift). Full-text search engine across nodes/ADRs/modes. Never a protocol requirement.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer l-adopt">
|
||||
<div class="layer-tag">Adoption<br/>Layer<br/>Per-project</div>
|
||||
<div class="layer-body">
|
||||
<div class="items">
|
||||
<span class="chip">templates/ontology/</span>
|
||||
<span class="chip">templates/ontoref-config.ncl</span>
|
||||
<span class="chip">templates/scripts-ontoref</span>
|
||||
<span class="chip">adopt_ontoref mode</span>
|
||||
<span class="chip">ONTOREF_PROJECT_ROOT</span>
|
||||
</div>
|
||||
<div class="desc">Each project maintains its own .ontology/ data. One ontoref checkout serves multiple projects via ONTOREF_PROJECT_ROOT. Zero lock-in — files are plain NCL.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Request Flows ── -->
|
||||
<div class="flow-section">
|
||||
<div class="section-h">Request Flows</div>
|
||||
|
||||
<!-- Flow 1: CLI path -->
|
||||
<div class="flow-row-label">CLI path — developer or agent via shell</div>
|
||||
<div class="flow-row">
|
||||
<div class="flow-node fn-actor">
|
||||
<div class="fn-label">Actor</div>
|
||||
<div class="fn-sub">developer · agent · CI</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-cli">
|
||||
<div class="fn-label">./ontoref</div>
|
||||
<div class="fn-sub">bash wrapper</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-cli">
|
||||
<div class="fn-label">ontoref.nu</div>
|
||||
<div class="fn-sub">Nu dispatcher</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-daemon">
|
||||
<div class="fn-label">daemon</div>
|
||||
<div class="fn-sub">cache / notify</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-ncl">
|
||||
<div class="fn-label">nickel export</div>
|
||||
<div class="fn-sub">.ontology/ · adrs/</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-git">
|
||||
<div class="fn-label">reflection/</div>
|
||||
<div class="fn-sub">qa.ncl · backlog.ncl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow 2: MCP/agent path -->
|
||||
<div class="flow-row-label" style="margin-top:1.5rem;">MCP / AI agent path — Claude Code or any MCP client</div>
|
||||
<div class="flow-row" style="opacity: 0.85;">
|
||||
<div class="flow-node fn-mcp" style="min-width: 80px;">
|
||||
<div class="fn-label">AI Agent</div>
|
||||
<div class="fn-sub">Claude · any MCP client</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-daemon">
|
||||
<div class="fn-label">MCP server</div>
|
||||
<div class="fn-sub">stdio · HTTP /mcp</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-ncl">
|
||||
<div class="fn-label">19 tools</div>
|
||||
<div class="fn-sub">read · write · query</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-git">
|
||||
<div class="fn-label">NCL files</div>
|
||||
<div class="fn-sub">git-versioned</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow 3: pre-commit hook -->
|
||||
<div class="flow-row-label" style="margin-top:1.5rem;">Pre-commit barrier — notification-gated commit path</div>
|
||||
<div class="flow-row" style="opacity: 0.85;">
|
||||
<div class="flow-node fn-hook">
|
||||
<div class="fn-label">git commit</div>
|
||||
<div class="fn-sub">pre-commit hook fires</div>
|
||||
</div>
|
||||
<div class="flow-arrow warn">→</div>
|
||||
<div class="flow-node fn-daemon">
|
||||
<div class="fn-label">GET /notifications</div>
|
||||
<div class="fn-sub">/pending?token=X&project=Y</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-ncl">
|
||||
<div class="fn-label">pending?</div>
|
||||
<div class="fn-sub">pre_commit · drift · ontology_drift</div>
|
||||
</div>
|
||||
<div class="flow-arrow warn">→</div>
|
||||
<div class="flow-node fn-hook">
|
||||
<div class="fn-label">block</div>
|
||||
<div class="fn-sub">until acked in UI / POST /notifications/ack</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node fn-pass">
|
||||
<div class="fn-label">pass</div>
|
||||
<div class="fn-sub">fail-open if daemon unreachable</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Daemon Components ── -->
|
||||
<div class="section-h">Daemon Components</div>
|
||||
<div class="daemon-detail">
|
||||
|
||||
<!-- Box 1: HTTP API routes -->
|
||||
<div class="daemon-box box-http">
|
||||
<h3>HTTP API · /ui/{slug}</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/</span><span class="route-desc">Dashboard — overview, actors, cache stats</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/graph</span><span class="route-desc">D3 ontology graph (nodes by pole, edges)</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/search</span><span class="route-desc">Search across nodes/ADRs/modes</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/sessions</span><span class="route-desc">Live actor registry</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/notifications</span><span class="route-desc">Notification feed + ack UI</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/backlog</span><span class="route-desc">Backlog with priority/status</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/qa</span><span class="route-desc">Q&A knowledge store</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/actions</span><span class="route-desc">Quick actions catalog</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/modes</span><span class="route-desc">Reflection modes browser</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/ui/{slug}/compose</span><span class="route-desc">Agent task composer (live sharing)</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/actors</span><span class="route-desc">Actor sessions list</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/search?q=&project=</span><span class="route-desc">Search JSON endpoint</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/notifications/pending</span><span class="route-desc">Pre-commit hook polling</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/notifications/ack</span><span class="route-desc">Ack one or all notifications</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/{slug}/notifications/emit</span><span class="route-desc">Emit custom notification</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/{slug}/notifications/{id}/action</span><span class="route-desc">Trigger notification action</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/compose/send</span><span class="route-desc">Dispatch mode to ./ontoref server-side</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/actions/run</span><span class="route-desc">Execute quick action by id</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/qa/add</span><span class="route-desc">Append Q&A entry to NCL</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/qa/delete</span><span class="route-desc">Remove entry by id</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/qa/update</span><span class="route-desc">Mutate question + answer</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/qa-json</span><span class="route-desc">Export all Q&A entries</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/backlog/add</span><span class="route-desc">Add backlog item</span></li>
|
||||
<li><span class="method post">POST</span><span class="route-path">/backlog/status</span><span class="route-desc">Update backlog item status</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/backlog-json</span><span class="route-desc">Export backlog as JSON</span></li>
|
||||
<li><span class="method get">GET</span><span class="route-path">/health</span><span class="route-desc">Cache stats + uptime + SurrealDB status</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Box 2: MCP Server -->
|
||||
<div class="daemon-box box-mcp">
|
||||
<h3>MCP Server · 19 tools</h3>
|
||||
<ul class="tool-list">
|
||||
<li><span class="tool-name">ontoref_help</span> <span class="tool-desc">— list all tools and usage</span></li>
|
||||
<li><span class="tool-name">ontoref_list_projects</span> <span class="tool-desc">— enumerate loaded projects</span></li>
|
||||
<li><span class="tool-name">ontoref_set_project</span> <span class="tool-desc">— set session default project</span></li>
|
||||
<li><span class="tool-name">ontoref_project_status</span> <span class="tool-desc">— full project dashboard</span></li>
|
||||
<li><span class="tool-name">ontoref_describe</span> <span class="tool-desc">— architecture overview</span></li>
|
||||
<li><span class="tool-name">ontoref_search</span> <span class="tool-desc">— free-text across nodes/ADRs/modes</span></li>
|
||||
<li><span class="tool-name">ontoref_get</span> <span class="tool-desc">— fetch node by id</span></li>
|
||||
<li><span class="tool-name">ontoref_get_node</span> <span class="tool-desc">— full ontology node with edges</span></li>
|
||||
<li><span class="tool-name">ontoref_list_adrs</span> <span class="tool-desc">— list ADRs by status filter</span></li>
|
||||
<li><span class="tool-name">ontoref_get_adr</span> <span class="tool-desc">— full ADR with constraints</span></li>
|
||||
<li><span class="tool-name">ontoref_list_modes</span> <span class="tool-desc">— list reflection modes</span></li>
|
||||
<li><span class="tool-name">ontoref_get_mode</span> <span class="tool-desc">— mode DAG contract</span></li>
|
||||
<li><span class="tool-name">ontoref_get_backlog</span> <span class="tool-desc">— backlog filtered by status</span></li>
|
||||
<li><span class="tool-name">ontoref_backlog</span> <span class="tool-desc">— add / update_status</span></li>
|
||||
<li><span class="tool-name">ontoref_constraints</span> <span class="tool-desc">— all architectural constraints</span></li>
|
||||
<li><span class="tool-name">ontoref_qa_list</span> <span class="tool-desc">— list Q&A with optional filter</span></li>
|
||||
<li><span class="tool-name">ontoref_qa_add</span> <span class="tool-desc">— append to reflection/qa.ncl</span></li>
|
||||
<li><span class="tool-name">ontoref_action_list</span> <span class="tool-desc">— quick actions from config.ncl</span></li>
|
||||
<li><span class="tool-name">ontoref_action_add</span> <span class="tool-desc">— create mode + register action</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Box 3: Sessions & Actors -->
|
||||
<div class="daemon-box box-sessions">
|
||||
<h3>Sessions & Actor Registry</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">ActorRegistry</span><span class="route-desc">backed by DashMap<String, ActorSession></span></li>
|
||||
<li><span class="route-path">token</span><span class="route-desc">random string, unique per session</span></li>
|
||||
<li><span class="route-path">actor_type</span><span class="route-desc">developer · agent · CI</span></li>
|
||||
<li><span class="route-path">registered_at</span><span class="route-desc">ISO timestamp, set on registration</span></li>
|
||||
<li><span class="route-path">last_seen</span><span class="route-desc">updated on each API call</span></li>
|
||||
<li><span class="route-path">current_mode</span><span class="route-desc">last active reflection mode</span></li>
|
||||
<li><span class="route-path">serializable</span><span class="route-desc">snapshot for disk persistence</span></li>
|
||||
<li><span class="route-path">pre-commit CI</span><span class="route-desc">registers as ci actor on hook fire</span></li>
|
||||
</ul>
|
||||
<h3 class="sub-h">Compose / Live Sharing</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">/ui/{slug}/compose</span><span class="route-desc">renders mode form schemas as interactive HTML</span></li>
|
||||
<li><span class="route-path">POST /compose/send</span><span class="route-desc">dispatches ./ontoref {mode} {params} on server</span></li>
|
||||
<li><span class="route-path">shared context</span><span class="route-desc">multiple actors see same composed task live</span></li>
|
||||
<li><span class="route-path">/ui/{slug}/manage</span><span class="route-desc">project registry CRUD (multi-project mode)</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Box 4: Notification Store & Search -->
|
||||
<div class="daemon-box box-notify">
|
||||
<h3>Notification Store & Search</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">NotificationStore</span><span class="route-desc">in-memory queue per (project, token)</span></li>
|
||||
<li><span class="route-path">pre_commit</span><span class="route-desc">blocks git commits until acked by actor</span></li>
|
||||
<li><span class="route-path">drift</span><span class="route-desc">schema drift between codebase and ontology</span></li>
|
||||
<li><span class="route-path">ontology_drift</span><span class="route-desc">from passive observer — missing/stale/drift/broken counts</span></li>
|
||||
<li><span class="route-path">fail-open</span><span class="route-desc">if daemon unreachable, pre-commit hook passes</span></li>
|
||||
<li><span class="route-path">ack workflow</span><span class="route-desc">POST /notifications/ack (one or all); action buttons in UI</span></li>
|
||||
</ul>
|
||||
<h3 class="sub-h">Search Engine</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">indexes</span><span class="route-desc">ontology nodes (id, name, description)</span></li>
|
||||
<li><span class="route-path">indexes</span><span class="route-desc">ADRs (title, context, decision)</span></li>
|
||||
<li><span class="route-path">indexes</span><span class="route-desc">reflection modes (name, description, steps)</span></li>
|
||||
<li><span class="route-path">SearchResult</span><span class="route-desc">kind · id · title · snippet · score</span></li>
|
||||
<li><span class="route-path">used by</span><span class="route-desc">UI search page + MCP ontoref_search tool</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Box 5: NCL mutations + SurrealDB -->
|
||||
<div class="daemon-box box-ncl span2">
|
||||
<h3>NCL Files — Mutations</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">reflection/qa.ncl</span><span class="route-desc">QaStore — typed entries, git-versioned; written only via crates/ontoref-daemon/src/ui/qa_ncl.rs (ADR-003 hard constraint)</span></li>
|
||||
<li><span class="route-path">reflection/backlog.ncl</span><span class="route-desc">BacklogStore — items with status (Open/InProgress/Done/Cancelled) and priority (Critical/High/Medium/Low)</span></li>
|
||||
<li><span class="route-path">.ontoref/config.ncl</span><span class="route-desc">quick_actions catalog, log level, NATS toggle</span></li>
|
||||
<li><span class="route-path">reflection/modes/*.ncl</span><span class="route-desc">new mode files created by ontoref_action_add</span></li>
|
||||
</ul>
|
||||
<h3 class="sub-h">Drift Observer</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">watches</span><span class="route-desc">crates/ · .ontology/ · adrs/ · reflection/modes/</span></li>
|
||||
<li><span class="route-path">debounce</span><span class="route-desc">15 seconds after last filesystem event</span></li>
|
||||
<li><span class="route-path">runs</span><span class="route-desc">sync scan → sync diff (read-only, never applies changes)</span></li>
|
||||
<li><span class="route-path">emits</span><span class="route-desc">ontology_drift { missing, stale, drift, broken } to NotificationStore</span></li>
|
||||
</ul>
|
||||
<h3 class="sub-h">SurrealDB (optional --db feature)</h3>
|
||||
<ul class="route-list">
|
||||
<li><span class="route-path">connection</span><span class="route-desc">WebSocket to --db-url ws://...; 5s timeout at startup; fail-open</span></li>
|
||||
<li><span class="route-path">seeds</span><span class="route-desc">ontology tables from local NCL files on startup and on file changes (via notify watcher)</span></li>
|
||||
<li><span class="route-path">persists</span><span class="route-desc">actor sessions, seeded ontology tables, search index, notification history — survives daemon restarts</span></li>
|
||||
<li><span class="route-path">without --db</span><span class="route-desc">DashMap-backed in-memory cache only; process-lifetime; actor sessions and search index are ephemeral</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Persistence Tiers ── -->
|
||||
<div class="section-h">Persistence Tiers</div>
|
||||
<div class="persistence-grid">
|
||||
<div class="persist-box tier-memory">
|
||||
<h3>In-Memory — Always Active</h3>
|
||||
<p class="tier-sub">DashMap-backed, process-lifetime — no flags required</p>
|
||||
<ul>
|
||||
<li><strong>DashMap cache</strong> — NCL export results, path+mtime keyed</li>
|
||||
<li><strong>NotificationStore</strong> — per (project, token) notification queue</li>
|
||||
<li><strong>ActorRegistry</strong> — live session DashMap</li>
|
||||
<li><strong>SessionStore</strong> — token → ActorSession map</li>
|
||||
<li><strong>Search index</strong> — in-process full-text over loaded NCL data</li>
|
||||
<li>All state is <strong>lost on daemon restart</strong></li>
|
||||
<li>Serializable snapshots can be written to disk as JSON/NCL</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="persist-box tier-surreal">
|
||||
<h3>SurrealDB — Optional <code>--db</code> Flag</h3>
|
||||
<p class="tier-sub">WebSocket connection, fail-open — survives daemon restarts</p>
|
||||
<ul>
|
||||
<li><strong>Actor sessions</strong> — token, type, registered_at, last_seen, mode</li>
|
||||
<li><strong>Seeded ontology tables</strong> — nodes, ADRs, modes from NCL files</li>
|
||||
<li><strong>Search index</strong> — persisted search index for nodes/ADRs/modes</li>
|
||||
<li><strong>Notification history</strong> — acked and dismissed notifications</li>
|
||||
<li>Enabled with <code>--db-url ws://...</code> + <code>--db-namespace</code></li>
|
||||
<li>If SurrealDB is unreachable at startup, <strong>daemon still starts</strong> using in-memory tier</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Active Constraints ── -->
|
||||
<div class="section-h">Active Constraints (ADR-003 · ADR-002 · ADR-001)</div>
|
||||
<div class="constraints">
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">qa-write-via-mutation-module</div>
|
||||
<div class="c-claim">All mutations to reflection/qa.ncl must go through <code>crates/ontoref-daemon/src/ui/qa_ncl.rs</code> — no direct file writes from other call sites.</div>
|
||||
</div>
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">qa-schema-typed</div>
|
||||
<div class="c-claim"><code>reflection/qa.ncl</code> must conform to the QaStore contract from <code>reflection/schemas/qa.ncl</code> — nickel typecheck must pass.</div>
|
||||
</div>
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">mcp-qa-tools-no-apply-drift</div>
|
||||
<div class="c-claim">MCP tools <code>ontoref_qa_list</code> and <code>ontoref_qa_add</code> must never trigger sync apply steps or modify <code>.ontology/</code> files.</div>
|
||||
</div>
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">protocol-not-runtime (axiom)</div>
|
||||
<div class="c-claim">ontoref-daemon is optional runtime support — not a protocol requirement. The protocol functions without it. Every module falls back to direct subprocess.</div>
|
||||
</div>
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">notification-barrier-fail-open</div>
|
||||
<div class="c-claim">The pre-commit hook must not block git commits when the daemon is unreachable. If <code>GET /notifications/pending</code> fails (connection error, timeout), the hook must pass immediately.</div>
|
||||
</div>
|
||||
<div class="constraint-card hard">
|
||||
<div class="c-id">ontology-crate-zero-stratumiops-deps (ADR-001)</div>
|
||||
<div class="c-claim"><code>ontoref-ontology</code> must never depend on <code>stratum-graph</code>, <code>stratum-state</code>, or <code>stratum-orchestrator</code>. The ontology crate is the protocol's minimal adoption surface and must build standalone.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
<script>
|
||||
const KEY = "ontoref-arch-theme";
|
||||
function getTheme() { return localStorage.getItem(KEY) || "dark"; }
|
||||
function setTheme(t) {
|
||||
localStorage.setItem(KEY, t);
|
||||
const btn = document.getElementById("theme-btn");
|
||||
if (t === "light") {
|
||||
document.documentElement.classList.add("light");
|
||||
btn.textContent = "🌙";
|
||||
} else {
|
||||
document.documentElement.classList.remove("light");
|
||||
btn.textContent = "☀️";
|
||||
}
|
||||
}
|
||||
function toggleTheme() { setTheme(getTheme() === "dark" ? "light" : "dark"); }
|
||||
document.addEventListener("DOMContentLoaded", () => setTheme(getTheme()));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
143
assets/web/src/architecture-diagram.html
Normal file
143
assets/web/src/architecture-diagram.html
Normal file
@ -0,0 +1,143 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ontoref — Architecture</title>
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--border: rgba(96, 165, 250, 0.3);
|
||||
--muted: #94a3b8;
|
||||
--blue: #60a5fa;
|
||||
--orange: #E8A838;
|
||||
}
|
||||
|
||||
html.light {
|
||||
--bg: #f8fafc;
|
||||
--border: rgba(96, 165, 250, 0.35);
|
||||
--muted: #64748b;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.diagram-container {
|
||||
width: min(1100px, 100vw);
|
||||
aspect-ratio: 900 / 578;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.diagram-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 0.3rem;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover { color: var(--blue); }
|
||||
|
||||
.nav-btn.back {
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
color: var(--blue);
|
||||
border: 1px solid rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
.nav-btn.back:hover { background: rgba(96, 165, 250, 0.18); }
|
||||
|
||||
.nav-btn.theme { font-size: 1.1rem; padding: 0.4rem 0.7rem; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav { top: 1rem; right: 1rem; }
|
||||
.diagram-container {
|
||||
width: 100vw;
|
||||
aspect-ratio: 900 / 578;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<button class="nav-btn theme" onclick="toggleTheme()" title="Toggle dark/light mode" id="theme-btn">☀️</button>
|
||||
<a href="index.html" class="nav-btn back">← Ontoref</a>
|
||||
</nav>
|
||||
|
||||
<div class="diagram-container">
|
||||
<img id="svg-dark" src="../protocol-flow-dark.svg" alt="Ontoref — Protocol Layers & Request Flow (dark)" style="display:block;" />
|
||||
<img id="svg-light" src="../protocol-flow-light.svg" alt="Ontoref — Protocol Layers & Request Flow (light)" style="display:none;" />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const THEME_KEY = "ontoref-arch-theme";
|
||||
|
||||
function getTheme() { return localStorage.getItem(THEME_KEY) || "dark"; }
|
||||
|
||||
function setTheme(t) {
|
||||
localStorage.setItem(THEME_KEY, t);
|
||||
var btn = document.getElementById("theme-btn");
|
||||
var dark = document.getElementById("svg-dark");
|
||||
var light = document.getElementById("svg-light");
|
||||
if (t === "light") {
|
||||
document.documentElement.classList.add("light");
|
||||
btn.textContent = "\uD83C\uDF19";
|
||||
dark.style.display = "none";
|
||||
light.style.display = "block";
|
||||
} else {
|
||||
document.documentElement.classList.remove("light");
|
||||
btn.textContent = "\u2600\uFE0F";
|
||||
dark.style.display = "block";
|
||||
light.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() { setTheme(getTheme() === "dark" ? "light" : "dark"); }
|
||||
|
||||
setTheme(getTheme());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2010
assets/web/src/index.html
Normal file
2010
assets/web/src/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user