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>
<path id="hexPath" d="M 100 10 L 173.2 50 L 173.2 130 L 100 170 L 26.8 130 L 26.8 50 Z"/>
<linearGradient id="hexFill" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a1324"/>
<stop offset="50%" stop-color="#101f36"/>
<stop offset="100%" stop-color="#0a1220"/>
</linearGradient>
<linearGradient id="hexStroke" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#6fe7d5"/>
<stop offset="50%" stop-color="#6aa6ff"/>
<stop offset="100%" stop-color="#f2c176"/>
</linearGradient>
<radialGradient id="hexGlow" cx="50%" cy="42%" r="70%">
<stop offset="0%" stop-color="#223656" stop-opacity="0.85"/>
<stop offset="60%" stop-color="#0c1629" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#070d19" stop-opacity="0.15"/>
</radialGradient>
<linearGradient id="innerStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#5de7d2" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#f0c07a" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="bandFill" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#14243b" stop-opacity="0.95"/>
<stop offset="50%" stop-color="#1b2f4d" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#14243b" stop-opacity="0.95"/>
</linearGradient>
<linearGradient id="bandStroke" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3a567a" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#22354f" stop-opacity="0.8"/>
</linearGradient>
<linearGradient id="letterStroke" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e6fbff"/>
<stop offset="50%" stop-color="#bfe8ff"/>
<stop offset="100%" stop-color="#f6d19a"/>
</linearGradient>
<linearGradient id="letterHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7cead6"/>
<stop offset="50%" stop-color="#9bd2ff"/>
<stop offset="100%" stop-color="#ffd29a"/>
</linearGradient>
<linearGradient id="letterDetail" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#9edfff"/>
<stop offset="100%" stop-color="#6fd9c8"/>
</linearGradient>
<linearGradient id="letterE" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f5e0d0"/>
<stop offset="50%" stop-color="#e8c8b0"/>
<stop offset="100%" stop-color="#d4a88a"/>
</linearGradient>
<filter id="eGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<radialGradient id="nodeFill" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="70%" stop-color="#9ce6ff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#4fc8b6" stop-opacity="0.2"/>
</radialGradient>
<pattern id="microGrid" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
<path d="M 0 0 L 14 0" stroke="#8fd4ff" stroke-width="0.6" stroke-opacity="0.12"/>
<path d="M 0 7 L 14 7" stroke="#8fd4ff" stroke-width="0.6" stroke-opacity="0.08"/>
<path d="M 0 14 L 14 14" stroke="#8fd4ff" stroke-width="0.6" stroke-opacity="0.12"/>
<path d="M 0 0 L 0 14" stroke="#7ad6c8" stroke-width="0.6" stroke-opacity="0.08"/>
<circle cx="7" cy="7" r="1.6" fill="#9fe1ff" fill-opacity="0.18"/>
</pattern>
<filter id="hexShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="10" stdDeviation="8" flood-color="#050a14" flood-opacity="0.85"/>
</filter>
<filter id="letterGlow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<clipPath id="hexClip">
<use href="#hexPath"/>
</clipPath>
</defs>
<g filter="url(#hexShadow)">
<use href="#hexPath" fill="url(#hexFill)" stroke="url(#hexStroke)" stroke-width="4" stroke-linejoin="round"/>
</g>
<g clip-path="url(#hexClip)">
<use href="#hexPath" fill="url(#hexGlow)"/>
<rect x="20" y="20" width="160" height="160" fill="url(#microGrid)" opacity="0.35"/>
<rect x="34" y="58" width="132" height="64" rx="10" fill="url(#bandFill)" stroke="url(#bandStroke)" stroke-width="1.2" opacity="0.95"/>
<g opacity="0.25" stroke="#8acbff" stroke-width="1" stroke-linecap="round">
<path d="M 40 90 H 160" stroke-dasharray="5 6"/>
<path d="M 44 74 H 156" stroke-dasharray="3 8"/>
<path d="M 44 106 H 156" stroke-dasharray="3 8"/>
</g>
<g id="letters" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#letterGlow)">
<g id="letter-base" stroke="url(#letterStroke)" stroke-width="6">
<path d="M 59 70 A 9 20 0 0 0 59 110"/>
<ellipse cx="76" cy="90" rx="9" ry="20"/>
<path d="M 93 70 L 93 110"/>
<path d="M 93 70 L 97 70"/>
<path d="M 93 110 L 97 110"/>
<path d="M 97 70 A 7 20 0 0 1 97 110"/>
<path d="M 135 70 L 153 110"/>
<path d="M 153 70 L 135 110"/>
</g>
<g id="letter-E" stroke="url(#letterE)" stroke-width="6" filter="url(#eGlow)">
<path d="M 112 70 L 112 110"/>
<path d="M 112 70 L 127 70"/>
<path d="M 112 90 L 124 90"/>
<path d="M 112 110 L 127 110"/>
</g>
<g id="letter-highlight" stroke="url(#letterHighlight)" stroke-width="2.2" opacity="0.85">
<path d="M 56 74 A 6 16 0 0 0 56 106"/>
<ellipse cx="76" cy="90" rx="5.5" ry="13"/>
<path d="M 96 76 A 4.5 14 0 0 1 96 104"/>
<path d="M 137 74 L 151 106"/>
<path d="M 151 74 L 137 106"/>
</g>
<g id="letter-E-highlight" stroke="#f5d6c6" stroke-width="2" opacity="0.6">
<path d="M 112 70 L 112 110"/>
<path d="M 112 70 L 127 70"/>
<path d="M 112 90 L 124 90"/>
<path d="M 112 110 L 127 110"/>
</g>
<g id="letter-detail" stroke="url(#letterDetail)" stroke-width="1" opacity="0.65">
<path d="M 46 80 L 52 80"/>
<path d="M 46 100 L 52 100"/>
<path d="M 49 84 L 49 96" stroke-dasharray="2 3"/>
<path d="M 76 76 L 76 104"/>
<path d="M 70 90 L 82 90"/>
<path d="M 93 90 L 101 90"/>
<path d="M 99 78 L 99 102" stroke-dasharray="2 4"/>
<path d="M 140 82 L 148 90 L 140 98"/>
<path d="M 148 82 L 140 90 L 148 98"/>
</g>
<g id="letter-E-detail" stroke="#d4a88a" stroke-width="1" opacity="0.5">
<path d="M 116 80 L 124 80" stroke-dasharray="3 3"/>
<path d="M 116 100 L 124 100" stroke-dasharray="3 3"/>
<path d="M 114 78 L 114 102" stroke-dasharray="2 3"/>
</g>
<g id="letter-nodes" fill="url(#nodeFill)" stroke="#d7f6ff" stroke-width="0.6" opacity="0.9">
<circle cx="59" cy="70" r="2"/>
<circle cx="59" cy="110" r="2"/>
<circle cx="76" cy="70" r="2"/>
<circle cx="76" cy="110" r="2"/>
<circle cx="67" cy="90" r="1.8"/>
<circle cx="85" cy="90" r="1.8"/>
<circle cx="93" cy="70" r="1.9"/>
<circle cx="93" cy="110" r="1.9"/>
<circle cx="104" cy="90" r="1.9"/>
<circle cx="97" cy="90" r="1.6"/>
<circle cx="135" cy="70" r="1.9"/>
<circle cx="153" cy="110" r="1.9"/>
<circle cx="153" cy="70" r="1.9"/>
<circle cx="135" cy="110" r="1.9"/>
<circle cx="144" cy="90" r="1.8"/>
<rect x="141.5" y="87.5" width="5" height="5" transform="rotate(45 144 90)" fill="url(#nodeFill)" stroke="#d7f6ff" stroke-width="0.6"/>
</g>
<g id="letter-E-nodes" fill="url(#nodeFill)" stroke="#e8c4a8" stroke-width="0.8" opacity="0.95">
<circle cx="112" cy="70" r="2"/>
<circle cx="127" cy="70" r="2"/>
<circle cx="112" cy="90" r="1.8"/>
<circle cx="124" cy="90" r="1.8"/>
<circle cx="112" cy="110" r="2"/>
<circle cx="127" cy="110" r="2"/>
</g>
</g>
<use href="#hexPath" fill="none" stroke="url(#innerStroke)" stroke-width="1.4" opacity="0.6"/>
</g>
<g opacity="0.55">
<path d="M 100 10 L 173.2 50" fill="none" stroke="#f5f9ff" stroke-width="1.4" stroke-linecap="round"/>
<path d="M 26.8 50 L 100 10" fill="none" stroke="#f5f9ff" stroke-width="1.4" stroke-linecap="round"/>
</g>
<g opacity="0.5">
<circle cx="100" cy="10" r="3" fill="#f8fbff"/>
<circle cx="173.2" cy="90" r="2.4" fill="#77e7d6"/>
<circle cx="26.8" cy="90" r="2.4" fill="#f0c07a"/>
</g>
</svg>