AkurAI-Framework / site/frontend/img/hero.svg

Latest change e9909ad2b4e6b497ab8fb7ab24cc92d36305e7f5 - landing: two-column hero + codex/gpt-5.5 SVG illustration & gradient feature icons by Ólafur Búi Ólafsson

<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" viewBox="0 0 640 480">
  <title id="title">AkurAI Framework full-stack single binary illustration</title>
  <desc id="desc">Layered HTTP, database, and UI planes converge into a glowing single binary cube.</desc>
  <defs>
    <linearGradient id="brand" x1="198" x2="442" y1="92" y2="396" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5b8cff"/>
      <stop offset="1" stop-color="#8a6bff"/>
    </linearGradient>
    <linearGradient id="edge" x1="188" x2="452" y1="132" y2="348" gradientUnits="userSpaceOnUse">
      <stop stop-color="#e7ebf3" stop-opacity=".72"/>
      <stop offset=".58" stop-color="#5b8cff" stop-opacity=".42"/>
      <stop offset="1" stop-color="#8a6bff" stop-opacity=".62"/>
    </linearGradient>
    <radialGradient id="glow" cx="0" cy="0" r="1" gradientTransform="matrix(132 0 0 106 324 241)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5b8cff" stop-opacity=".44"/>
      <stop offset=".47" stop-color="#8a6bff" stop-opacity=".22"/>
      <stop offset="1" stop-color="#8a6bff" stop-opacity="0"/>
    </radialGradient>
    <pattern id="dots" width="18" height="18" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="1" fill="#8a93a8" opacity=".28"/>
    </pattern>
    <filter id="soft" x="-35%" y="-35%" width="170%" height="170%">
      <feGaussianBlur stdDeviation="8"/>
    </filter>
    <filter id="cubeGlow" x="-45%" y="-45%" width="190%" height="190%">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5"/>
      <feColorMatrix in="blur" result="tint" values="0 0 0 0 0.36 0 0 0 0 0.55 0 0 0 0 1 0 0 0 .72 0"/>
      <feMerge>
        <feMergeNode in="tint"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <style>
      .plane{fill:#141925;stroke:url(#edge);stroke-width:1.2}
      .line{fill:none;stroke:#5b8cff;stroke-width:1;stroke-opacity:.34}
      .dash{stroke-dasharray:4 8}
      .label{font:600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.4px;fill:#e7ebf3;opacity:.56}
      .node{fill:#3ddc84;stroke:#0a0c11;stroke-width:3}
    </style>
  </defs>
  <ellipse cx="320" cy="242" rx="194" ry="126" fill="url(#glow)"/>
  <path fill="url(#dots)" opacity=".34" d="M81 126h480v260H81z"/>
  <g opacity=".78">
    <path class="line dash" d="M105 172c65-56 128-82 189-77 60 5 115 40 166 104"/>
    <path class="line" d="M95 300c77 37 151 46 222 27 72-19 145-70 219-153"/>
    <path class="line dash" d="M136 388c56-96 119-153 187-170 67-18 128 2 181 60"/>
    <path class="line" d="M172 109c48 74 96 115 146 122 49 8 101-17 155-73"/>
  </g>
  <g opacity=".94">
    <g transform="translate(0 74)">
      <path class="plane" opacity=".34" d="M104 188 290 92l247 113-188 101z"/>
      <path fill="#5b8cff" opacity=".06" d="M104 188 290 92l247 113-188 101z"/>
      <path fill="none" stroke="#5b8cff" stroke-opacity=".22" d="m157 188 135-69 191 88m-296-35 209 99m-69-163 157 73"/>
      <text class="label" x="169" y="196">HTTP</text>
    </g>
    <g transform="translate(0 8)">
      <path class="plane" opacity=".43" d="M119 196 297 104l224 103-180 96z"/>
      <path fill="#8a6bff" opacity=".08" d="M119 196 297 104l224 103-180 96z"/>
      <path fill="none" stroke="#8a6bff" stroke-opacity=".24" d="m175 196 124-64 170 77m-264-30 185 88m-47-142 126 58"/>
      <text class="label" x="177" y="203">DB</text>
    </g>
    <g transform="translate(0 -58)">
      <path class="plane" opacity=".52" d="M137 204 304 118l198 91-169 91z"/>
      <path fill="#e7ebf3" opacity=".035" d="M137 204 304 118l198 91-169 91z"/>
      <path fill="none" stroke="#e7ebf3" stroke-opacity=".18" d="m188 205 118-60 147 67m-238-21 167 79m-34-139 105 52"/>
      <text class="label" x="194" y="210">UI</text>
    </g>
  </g>
  <g fill="none" opacity=".38">
    <path stroke="#8a6bff" stroke-width="1.1" d="M320 91c62 12 111 47 145 103"/>
    <path stroke="#5b8cff" stroke-width="1.1" d="M177 290c31 61 82 99 153 113"/>
    <path stroke="#8a93a8" stroke-width=".9" stroke-dasharray="3 7" d="M127 241c53-83 121-133 204-151"/>
    <path stroke="#8a93a8" stroke-width=".9" stroke-dasharray="3 7" d="M514 245c-52 84-121 133-207 147"/>
  </g>
  <g filter="url(#soft)" opacity=".58">
    <circle cx="322" cy="242" r="54" fill="#5b8cff"/>
    <circle cx="348" cy="234" r="44" fill="#8a6bff"/>
  </g>
  <g filter="url(#cubeGlow)">
    <path fill="url(#brand)" d="m320 173 72 39v83l-72 41-72-41v-83z"/>
    <path fill="#e7ebf3" opacity=".18" d="m320 173 72 39-72 41-72-41z"/>
    <path fill="#0a0c11" opacity=".18" d="m320 253 72-41v83l-72 41z"/>
    <path fill="#0a0c11" opacity=".08" d="m248 212 72 41v83l-72-41z"/>
    <path fill="none" stroke="#e7ebf3" stroke-opacity=".78" stroke-width="1.4" d="m320 173 72 39v83l-72 41-72-41v-83zm0 80 72-41m-72 41-72-41m72 41v83"/>
    <path fill="#e7ebf3" fill-opacity=".9" d="M294 231h52v8h-52zm0 19h34v8h-34zm0 19h44v8h-44z"/>
  </g>
  <g>
    <circle class="node" cx="134" cy="173" r="6"/>
    <circle class="node" cx="503" cy="204" r="5"/>
    <circle class="node" cx="112" cy="303" r="5"/>
    <circle class="node" cx="513" cy="319" r="6"/>
    <circle class="node" cx="333" cy="95" r="4.5"/>
    <circle class="node" cx="302" cy="392" r="4.5"/>
  </g>
  <g fill="none" stroke-linecap="round" opacity=".72">
    <path stroke="#3ddc84" stroke-width="1.2" d="M134 173h45m324 31-42 7M112 303l48-14m353 30-47-21M333 95l-31 49m0 248 24-55"/>
    <path stroke="#8a93a8" stroke-width=".8" stroke-opacity=".36" d="M179 173c44 31 87 44 129 38m153 0c-34 27-67 40-100 39m-201 39c39-14 75-15 108-4m198 13c-34-24-70-35-108-34"/>
  </g>
</svg>