Current section
Files
Jump to
Current section
Files
assets/codex_sdk.svg
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="hexGradient" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#080817"/>
<stop offset="55%" stop-color="#27134a"/>
<stop offset="100%" stop-color="#0d0b27"/>
</linearGradient>
<linearGradient id="hexEdge" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#55ffe0"/>
<stop offset="50%" stop-color="#6f8cff"/>
<stop offset="100%" stop-color="#9f3fff"/>
</linearGradient>
<radialGradient id="innerGlow" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#8e75ff" stop-opacity="0.9"/>
<stop offset="45%" stop-color="#4c28b7" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#060413" stop-opacity="0.2"/>
</radialGradient>
<radialGradient id="backgroundVignette" cx="50%" cy="50%" r="78%">
<stop offset="0%" stop-color="#140c35" stop-opacity="0"/>
<stop offset="60%" stop-color="#09041c" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#05020f" stop-opacity="0.9"/>
</radialGradient>
<linearGradient id="innerRingStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#7bfff4" stop-opacity="0.85"/>
<stop offset="50%" stop-color="#76a2ff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#ffb4ff" stop-opacity="0.85"/>
</linearGradient>
<radialGradient id="bokehFill" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.75"/>
<stop offset="55%" stop-color="#9fe8ff" stop-opacity="0.32"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="cStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#5ef4ff"/>
<stop offset="50%" stop-color="#58ffe3"/>
<stop offset="100%" stop-color="#ad6eff"/>
</linearGradient>
<linearGradient id="xStroke" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffbb6e"/>
<stop offset="50%" stop-color="#f978ff"/>
<stop offset="100%" stop-color="#64f4ff"/>
</linearGradient>
<radialGradient id="corePulse" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fafaff" stop-opacity="0.95"/>
<stop offset="40%" stop-color="#8b7eff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#1e1040" stop-opacity="0"/>
</radialGradient>
<linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#60fff2" stop-opacity="0"/>
<stop offset="40%" stop-color="#60fff2" stop-opacity="0.8"/>
<stop offset="60%" stop-color="#c88cff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#c88cff" stop-opacity="0"/>
</linearGradient>
<pattern id="circuitPattern" width="18" height="18" patternUnits="userSpaceOnUse" patternTransform="rotate(12)">
<path d="M 0 18 L 18 0" stroke="#47d4ff" stroke-width="0.9" stroke-opacity="0.12"/>
<path d="M 9 0 L 9 18" stroke="#47d4ff" stroke-width="0.6" stroke-opacity="0.1"/>
<circle cx="9" cy="9" r="2.2" fill="#47d4ff" fill-opacity="0.18"/>
</pattern>
<linearGradient id="shineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="45%" stop-color="#ffffff" stop-opacity="0.65"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<clipPath id="hexClip">
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"/>
</clipPath>
<filter id="hexShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="15" stdDeviation="12" flood-color="#120922" flood-opacity="0.8"/>
</filter>
<filter id="sparkBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3"/>
</filter>
<filter id="bokehBlur" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<radialGradient id="sigilHalo" cx="50%" cy="50%" r="68%">
<stop offset="0%" stop-color="#6f58ff" stop-opacity="0.55"/>
<stop offset="40%" stop-color="#2a0f63" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#020108" stop-opacity="0"/>
</radialGradient>
<linearGradient id="orbitStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#75fff8"/>
<stop offset="45%" stop-color="#9b83ff"/>
<stop offset="100%" stop-color="#ffa6ff"/>
</linearGradient>
<linearGradient id="petalStroke" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffe6b3"/>
<stop offset="100%" stop-color="#70ffe3"/>
</linearGradient>
<linearGradient id="arcStroke" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5ff6ff" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#b487ff" stop-opacity="0.85"/>
</linearGradient>
<radialGradient id="nodeFill" cx="50%" cy="50%" r="55%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="70%" stop-color="#87fff4" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#1fa5ff" stop-opacity="0.05"/>
</radialGradient>
<filter id="sigilGlow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="nodePulse" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.4" result="soft"/>
<feColorMatrix in="soft" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 0.65 0"
result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- NEW FANCY EFFECTS -->
<filter id="depth3D" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur1"/>
<feOffset in="blur1" dx="0" dy="8" result="offsetBlur"/>
<feFlood flood-color="#2a0f63" flood-opacity="0.6" result="color"/>
<feComposite in="color" in2="offsetBlur" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="ultraGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur1"/>
<feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur2"/>
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur3"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="blur3"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="emboss" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="-2" dy="-2" result="offsetBlurPos"/>
<feOffset in="blur" dx="2" dy="2" result="offsetBlurNeg"/>
<feFlood flood-color="#ffffff" flood-opacity="0.3" result="lightColor"/>
<feFlood flood-color="#000000" flood-opacity="0.4" result="darkColor"/>
<feComposite in="lightColor" in2="offsetBlurPos" operator="in" result="lightShadow"/>
<feComposite in="darkColor" in2="offsetBlurNeg" operator="in" result="darkShadow"/>
<feMerge>
<feMergeNode in="darkShadow"/>
<feMergeNode in="lightShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<radialGradient id="depthLayer" cx="50%" cy="45%" r="60%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.15"/>
<stop offset="50%" stop-color="#5f3fff" stop-opacity="0.08"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0.25"/>
</radialGradient>
<linearGradient id="metallic" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e0f8ff" stop-opacity="0.9"/>
<stop offset="20%" stop-color="#6fb8ff" stop-opacity="0.6"/>
<stop offset="40%" stop-color="#2a5fff" stop-opacity="0.3"/>
<stop offset="60%" stop-color="#6fb8ff" stop-opacity="0.5"/>
<stop offset="80%" stop-color="#b8e0ff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.85"/>
</linearGradient>
<radialGradient id="chromatic" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff3fff" stop-opacity="0.4"/>
<stop offset="33%" stop-color="#3fffff" stop-opacity="0.35"/>
<stop offset="66%" stop-color="#ffff3f" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#ff3fff" stop-opacity="0.2"/>
</radialGradient>
</defs>
<!-- Background ambient glow layer -->
<g opacity="0.6">
<circle cx="100" cy="90" r="110" fill="url(#chromatic)" filter="url(#ultraGlow)"/>
</g>
<!-- Subtle vignette to pull focus toward the core -->
<rect width="200" height="200" fill="url(#backgroundVignette)" opacity="0.72"/>
<!-- Main hexagon with enhanced shadow -->
<g filter="url(#hexShadow)">
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"
fill="url(#hexGradient)"
stroke="url(#hexEdge)"
stroke-width="4"
stroke-linejoin="round"/>
</g>
<!-- Depth layer for 3D effect -->
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"
fill="url(#depthLayer)"
opacity="0.7"/>
<g clip-path="url(#hexClip)">
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"
fill="url(#innerGlow)"/>
<rect x="25" y="30" width="150" height="120" fill="url(#circuitPattern)" opacity="0.18"/>
<g opacity="0.35">
<path d="M 36 120 Q 75 85 120 110 T 180 95"
fill="none"
stroke="url(#beamGradient)"
stroke-width="10"
stroke-linecap="round"/>
<path d="M 30 88 Q 80 55 135 75 T 190 60"
fill="none"
stroke="url(#beamGradient)"
stroke-width="8"
stroke-linecap="round"/>
</g>
<path d="M 100 26 L 158 58 L 158 122 L 100 154 L 42 122 L 42 58 Z"
fill="none"
stroke="url(#innerRingStroke)"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
opacity="0.45"/>
<g transform="translate(100, 100)">
<g filter="url(#sigilGlow)" opacity="0.75">
<circle cx="0" cy="0" r="44" fill="url(#sigilHalo)"/>
</g>
<circle cx="0" cy="0" r="52" fill="none" stroke="url(#innerRingStroke)" stroke-width="1.6" stroke-linecap="round" stroke-opacity="0.65"/>
<circle cx="0" cy="0" r="46" fill="none" stroke="url(#orbitStroke)" stroke-width="2.2" stroke-dasharray="12 7" stroke-linecap="round" opacity="0.95"/>
<polygon points="0 -42 6.21 -23.18 21 -36.37 16.97 -16.97 36.37 -21 23.18 -6.21 42 0 23.18 6.21 36.37 21 16.97 16.97 21 36.37 6.21 23.18 0 42 -6.21 23.18 -21 36.37 -16.97 16.97 -36.37 21 -23.18 6.21 -42 0 -23.18 -6.21 -36.37 -21 -16.97 -16.97 -21 -36.37 -6.21 -23.18"
fill="none"
stroke="url(#petalStroke)"
stroke-width="1.8"
stroke-linejoin="round"
opacity="0.78"/>
<g opacity="0.65" stroke-linecap="round" fill="none" stroke-width="2.6" stroke="url(#arcStroke)">
<path d="M -30 -12 A 34 34 0 0 1 30 -12" />
<path d="M -30 12 A 34 34 0 0 0 30 12" stroke-dasharray="9 7" />
</g>
<g opacity="0.55" transform="rotate(60)">
<path d="M -30 -12 A 34 34 0 0 1 30 -12" fill="none" stroke="url(#arcStroke)" stroke-width="2.4" stroke-linecap="round"/>
<path d="M -30 12 A 34 34 0 0 0 30 12" fill="none" stroke="url(#arcStroke)" stroke-width="2" stroke-linecap="round" stroke-dasharray="9 7"/>
</g>
<g opacity="0.5" transform="rotate(120)">
<path d="M -30 -12 A 34 34 0 0 1 30 -12" fill="none" stroke="url(#arcStroke)" stroke-width="2.4" stroke-linecap="round"/>
<path d="M -30 12 A 34 34 0 0 0 30 12" fill="none" stroke="url(#arcStroke)" stroke-width="2" stroke-linecap="round" stroke-dasharray="9 7"/>
</g>
<g filter="url(#nodePulse)" opacity="0.85">
<circle cx="38" cy="0" r="3.2" fill="url(#nodeFill)" stroke="#84fff4" stroke-width="0.6"/>
<circle cx="26.9" cy="26.9" r="2.9" fill="url(#nodeFill)" stroke="#9efff9" stroke-width="0.5"/>
<circle cx="0" cy="38" r="3.1" fill="url(#nodeFill)" stroke="#72fff0" stroke-width="0.6"/>
<circle cx="-26.9" cy="26.9" r="2.9" fill="url(#nodeFill)" stroke="#aab5ff" stroke-width="0.5"/>
<circle cx="-38" cy="0" r="3.2" fill="url(#nodeFill)" stroke="#84fff4" stroke-width="0.6"/>
<circle cx="-26.9" cy="-26.9" r="2.9" fill="url(#nodeFill)" stroke="#9efff9" stroke-width="0.5"/>
<circle cx="0" cy="-38" r="3.1" fill="url(#nodeFill)" stroke="#72fff0" stroke-width="0.6"/>
<circle cx="26.9" cy="-26.9" r="2.9" fill="url(#nodeFill)" stroke="#aab5ff" stroke-width="0.5"/>
</g>
<g opacity="0.72">
<path d="M -14 -32 C -28 -18 -28 18 -14 32" fill="none" stroke="url(#petalStroke)" stroke-width="2.1" stroke-linecap="round"/>
<path d="M 14 -32 C 28 -18 28 18 14 32" fill="none" stroke="url(#petalStroke)" stroke-width="2.1" stroke-linecap="round"/>
<path d="M -18 -6 C -6 -10 6 -10 18 -6" fill="none" stroke="url(#arcStroke)" stroke-width="1.7" stroke-linecap="round" stroke-dasharray="4 5"/>
<path d="M -18 6 C -6 10 6 10 18 6" fill="none" stroke="url(#arcStroke)" stroke-width="1.7" stroke-linecap="round" stroke-dasharray="4 5"/>
</g>
<circle cx="0" cy="0" r="34" fill="url(#bokehFill)" opacity="0.3"/>
<circle cx="0" cy="0" r="24" fill="none" stroke="url(#innerRingStroke)" stroke-width="0.8" stroke-opacity="0.55"/>
<circle cx="0" cy="0" r="16" fill="#ffffff" opacity="0.16"/>
<!-- C letter with 3D depth -->
<g filter="url(#depth3D)">
<path d="M 34 -38 Q -44 -42 -52 0 Q -44 44 32 42"
fill="none"
stroke="url(#cStroke)"
stroke-width="9"
stroke-linecap="round"
stroke-linejoin="round"/>
</g>
<path d="M 28 -34 Q -36 -36 -42 0 Q -36 36 28 34"
fill="none"
stroke="#f5ffff"
stroke-width="2"
stroke-linecap="round"
opacity="0.32"/>
<!-- X letter with 3D depth -->
<g filter="url(#depth3D)">
<path d="M -15 -42 L 42 20"
fill="none"
stroke="url(#xStroke)"
stroke-width="7"
stroke-linecap="round"/>
<path d="M -8 38 L 46 -8"
fill="none"
stroke="url(#xStroke)"
stroke-width="7"
stroke-linecap="round"/>
</g>
<path d="M -10 -36 L 36 18"
fill="none"
stroke="#fff2ff"
stroke-width="1.8"
stroke-linecap="round"
opacity="0.3"/>
<path d="M -4 34 L 40 -6"
fill="none"
stroke="#fff2ff"
stroke-width="1.6"
stroke-linecap="round"
opacity="0.28"/>
<!-- Arrow with metallic sheen -->
<g filter="url(#emboss)">
<path d="M 18 -6 L 47 0 L 18 16"
fill="none"
stroke="url(#cStroke)"
stroke-width="7"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M 18 -6 L 47 0 L 18 16"
fill="none"
stroke="url(#metallic)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
opacity="0.6"/>
</g>
<circle cx="0" cy="0" r="28" fill="url(#corePulse)"/>
</g>
<g opacity="0.5">
<path d="M 54 64 Q 100 40 146 64" stroke="#6efdff" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.6"/>
<path d="M 58 138 Q 100 160 142 136" stroke="#b278ff" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.5"/>
</g>
<!-- Floating bokeh highlights for added depth -->
<g filter="url(#bokehBlur)" opacity="0.35">
<circle cx="68" cy="78" r="10" fill="url(#bokehFill)"/>
<circle cx="134" cy="118" r="8.5" fill="url(#bokehFill)" opacity="0.8"/>
<circle cx="108" cy="60" r="7" fill="url(#bokehFill)" opacity="0.6"/>
</g>
<!-- Enhanced sparkles with layered glow -->
<g filter="url(#sparkBlur)" opacity="0.75">
<circle cx="62" cy="86" r="4.4" fill="#7afcff" opacity="0.9"/>
<circle cx="146" cy="128" r="3.6" fill="#f0a6ff" opacity="0.85"/>
<circle cx="112" cy="70" r="2.8" fill="#63ffcc" opacity="0.75"/>
</g>
<!-- Additional floating sparkles -->
<g filter="url(#ultraGlow)" opacity="0.5">
<circle cx="48" cy="54" r="2.4" fill="#a8f0ff"/>
<circle cx="156" cy="68" r="1.9" fill="#ffa8ff"/>
<circle cx="70" cy="146" r="2.7" fill="#a8fff0"/>
<circle cx="132" cy="154" r="2.1" fill="#fff0a8"/>
<circle cx="100" cy="36" r="1.6" fill="#f0a8ff"/>
</g>
<!-- Light rays from center -->
<g opacity="0.25">
<path d="M 100 100 L 50 30" stroke="url(#beamGradient)" stroke-width="2" stroke-linecap="round"/>
<path d="M 100 100 L 150 30" stroke="url(#beamGradient)" stroke-width="2" stroke-linecap="round"/>
<path d="M 100 100 L 40 100" stroke="url(#beamGradient)" stroke-width="1.5" stroke-linecap="round"/>
<path d="M 100 100 L 160 100" stroke="url(#beamGradient)" stroke-width="1.5" stroke-linecap="round"/>
<path d="M 100 100 L 50 165" stroke="url(#beamGradient)" stroke-width="2" stroke-linecap="round"/>
<path d="M 100 100 L 150 165" stroke="url(#beamGradient)" stroke-width="2" stroke-linecap="round"/>
</g>
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"
fill="none"
stroke="url(#shineGradient)"
stroke-width="8"
opacity="0.45"/>
</g>
<!-- Top layer: rim lighting for extra pop -->
<g opacity="0.5">
<path d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"
fill="none"
stroke="url(#metallic)"
stroke-width="2"
opacity="0.8"/>
</g>
<!-- Highlight accents on top edges -->
<g opacity="0.7">
<path d="M 100 10 L 173.2 50"
fill="none"
stroke="#ffffff"
stroke-width="1.5"
stroke-linecap="round"
opacity="0.6"/>
<path d="M 26.8 50 L 100 10"
fill="none"
stroke="#ffffff"
stroke-width="1.5"
stroke-linecap="round"
opacity="0.6"/>
</g>
<!-- Corner glow spots -->
<g filter="url(#ultraGlow)" opacity="0.4">
<circle cx="100" cy="10" r="4" fill="#ffffff"/>
<circle cx="173.2" cy="90" r="3" fill="#80f0ff"/>
<circle cx="26.8" cy="90" r="3" fill="#f080ff"/>
</g>
</svg>