chore: fix resources and README
This commit is contained in:
Jesús Pérez
parent
a81bb46ff3
commit
6fc5b2ee7d
GPG key ID:
9F243E355E0BC939
26 changed files with 0 additions and 8747 deletions
|
|
@ -1,241 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 990 230">
|
||||
<defs>
|
||||
<clipPath id="logo-clip">
|
||||
<path d="M226.79,113.62c0,19.36,15.85,35.06,35.4,35.06,19.55,0,35.4-15.7,35.4-35.06,0-19.36-15.85-35.06-35.4-35.06h0c-42.68,0-35.4,15.7-35.4,35.06" style="fill:none;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#4cc2f1;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#4cc2f1;#f2b03f;#4cc2f1" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#f2b03f;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#f2b03f;#4cc2f1;#f2b03f" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#4cc2f1;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#4cc2f1;#f2b03f;#4cc2f1" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="particleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:0.8">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="2s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#7B2BFF;stop-opacity:0.8">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="2s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Logo icon on the left -->
|
||||
<g transform="translate(0, 0)">
|
||||
<g>
|
||||
<!-- Left wheel -->
|
||||
<g>
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 115.86 113.25;360 115.86 113.25" dur="8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel -->
|
||||
<g>
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 261.91 113.28;-360 261.91 113.28" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel center -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff;"/>
|
||||
<path d="M116.42,100.38c.2,0,.37,.16,.37,.36s-.16,.37-.37,.37c-.2,0-.37-.16-.37-.36,0,0,0,0,0,0,0-.2,.16-.36,.37-.37h0Zm1.38-4.53v-4.06h1.55c.82,.02,1.49-.63,1.51-1.43,.02-.81-.63-1.48-1.45-1.49-.02,0-.04,0-.06,0h-6.1c-.82-.02-1.49,.63-1.51,1.43-.02,.81,.63,1.48,1.45,1.49,.02,0,.04,0,.06,0h1.79v4.06m.14,18.68l6.92-9.15c.08-.11,.23-.13,.34-.05,.09,.07,.12,.19,.08,.29l-4.47,10.56c-.35,.84-1.32,1.23-2.16,.89-.07-.03-.14-.06-.2-.1-.8-.47-1.07-1.49-.6-2.28,.03-.05,.07-.11,.11-.16h0Zm-8.08-16.69l-1.86-3.97m2.09-.71l-3.98,1.86" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
|
||||
<!-- Green dot -->
|
||||
<path d="M86.86,91.68c0-1.42,1.17-2.57,2.6-2.56,1.43,0,2.59,1.16,2.59,2.58,0,1.42-1.17,2.57-2.6,2.56-1.43,0-2.58-1.15-2.59-2.56v-.02Z" style="fill:#50a89c;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity connection top-left -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity bottom-left -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity top-right -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity bottom-right -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Static connection elements -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central infinity flow -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;4;1" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Chronometer -->
|
||||
<g>
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.05;1" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.75;1" dur="2s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<g style="clip-path:url(#logo-clip);">
|
||||
<g>
|
||||
<path d="M329.9,88.02v57.19c0,1.92-1.57,3.47-3.51,3.47h-89.87c-1.94,0-3.51-1.55-3.51-3.47v-57.19c0-1.92,1.57-3.47,3.51-3.47h89.87c1.94,0,3.51,1.55,3.51,3.47" style="fill:#5e74b7;"/>
|
||||
<path d="M236.69,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#dba0a6;"/>
|
||||
<path d="M238.63,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#f5cc56;"/>
|
||||
<path d="M240.56,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#263682;"/>
|
||||
<path d="M237.73,89.86h87.43c.92,0,1.66,.74,1.66,1.64s-.74,1.64-1.66,1.64h-87.43c-.92,0-1.66-.74-1.66-1.64s.74-1.64,1.66-1.64m-1.16,9.24h22.25v45.29h-22.25v-45.29Zm23.91,0h64.88v45.29h-64.88v-45.29Z" style="fill:#f3f4f5;"/>
|
||||
|
||||
<path d="M265.45,108.82v13.02h53.62v-9.61s-3.47,2.93-5.61,2.93c-3.49,0-5.5-2.32-7.99-2.27-3.52,.07-4.32,2.03-7.04,2.27-3.57,.31-4.73-4.21-9.35-4.47-4.62-.27-6.46,4.96-10.78,4.65-3.26-.23-6.17-5.71-8.31-6.51-1.48-.45-3.06-.45-4.53,0" style="fill:#f2ac41;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1,1;1.02,1.1;1,1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<path d="M239.78,102.82h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Z" style="fill:#8d9ccf;"/>
|
||||
<path d="M284.39,127.69h16.01v11.29h-16.01v-11.29Zm-18.94,0h16.01v11.29h-16.01v-11.29Zm37.61,0h16.01v11.29h-16.01v-11.29Zm-56.48-22.8h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.7h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.79h9.27v1.08h-9.27v-1.08Z" style="fill:#d1d9e0;"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green indicator -->
|
||||
<ellipse cx="287.99" cy="132.27" rx="11.69" ry="11.58" style="fill:#05ab9e;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.05;1" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.8;1" dur="2s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Check mark -->
|
||||
<path d="M281.89,131.18l4.78,4.73,8.02-7.94" style="fill:none; stroke:#fff; stroke-width:4px;">
|
||||
<animate attributeName="stroke-dasharray" values="0 20;20 20" dur="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Text "provisioning" on the right, scaled to match icon -->
|
||||
<g transform="translate(390, 65)">
|
||||
<!-- Floating particles -->
|
||||
<g>
|
||||
<circle cx="50" cy="30" r="2" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;10,5;0,0" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="150" cy="20" r="1.5" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-8,7;0,0" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="250" cy="25" r="2.5" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;12,-6;0,0" dur="3.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="350" cy="15" r="1.8" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-6,8;0,0" dur="4.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="4.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="450" cy="35" r="2.2" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;9,-4;0,0" dur="3.8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="550" cy="28" r="1.6" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-7,9;0,0" dur="4.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="4.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Letters -->
|
||||
<g>
|
||||
<!-- p -->
|
||||
<path d="M6.89,82.3c-1.67-1.33-2.5-3.57-2.5-6.7s1.12-12.62,3.35-28.45c2.23-15.83,3.35-27.13,3.35-33.9s-.47-11.18-1.4-13.25c6.8,.53,11.27,3.2,13.4,8,5.13-2.8,10.78-4.2,16.95-4.2s11.03,1.92,14.6,5.75c3.57,3.83,5.35,8.55,5.35,14.15,0,6.93-2.54,13.2-7.6,18.8-2.47,2.67-5.65,4.83-9.55,6.5-3.9,1.67-8.22,2.5-12.95,2.5-2,0-3.9-.13-5.7-.4l-.3-4.2h.8c7.53,0,13.53-2.8,18-8.4,3.07-4,4.6-8.2,4.6-12.6,0-6.47-2.63-10.73-7.9-12.8-4.47-1.67-9.47-1.33-15,1v.2c0,2.53-.95,10.82-2.85,24.85-1.9,14.03-2.85,25.75-2.85,35.15,0,4.2,.2,7.47,.6,9.8-2.13,.13-3.53,.2-4.2,.2-3.8,0-6.53-.67-8.2-2Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- r -->
|
||||
<path d="M80.19,50.1c2.4-8.67,5.28-15.05,8.65-19.15c3.37-4.1,6.5-6.15,9.4-6.15s5.08,1.08,6.55,3.25c1.47,2.17,2.2,4.97,2.2,8.4s-1.02,6.58-3.05,9.45c-2.03,2.87-4.82,4.3-8.35,4.3-.93,0-2.04-.27-3.3-.8,2.07-2.6,3.1-5.73,3.1-9.4,0-2.13-.87-3.2-2.6-3.2-1.27,0-2.63,.88-4.1,2.65-1.47,1.77-2.87,4.2-4.2,7.3-1.33,3.1-2.45,7.07-3.35,11.9-.9,4.83-1.35,9.98-1.35,15.45,0,.67,.17,3.5,.5,8.5-2.13,.13-3.5,.2-4.1,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.13,2.9,9.9s-.3,7.38-.9,10.85Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- o -->
|
||||
<path d="M132.39,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.33,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75s-6.45-10.97-6.45-19.4,2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- v -->
|
||||
<path d="M193.09,82.6c-2.13,.93-4.37,1.4-6.7,1.4s-3.63-.5-3.9-1.5c-1.07-4.27-2.3-10.65-3.7-19.15s-2.82-15.93-4.25-22.3c-1.43-6.37-3.15-11.18-5.15-14.45,3.67-1.73,6.6-2.6,8.8-2.6s3.87,.5,5,1.5c1.13,1,2.08,2.98,2.85,5.95,.77,2.97,1.32,5.42,1.65,7.35,.93,6.4,1.4,9.97,1.4,10.7s.27,3.72,.8,8.95c.53,5.23,.93,8.68,1.2,10.35,11.87-23,17.8-38.37,17.8-46.1,5.47,2.8,8.2,5.83,8.2,9.1,0,2.67-1.38,6.62-4.15,11.85-2.77,5.23-6.23,11.57-10.4,19-4.17,7.43-7.32,14.08-9.45,19.95Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i -->
|
||||
<path d="M241.34,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- s -->
|
||||
<path d="M278.59,30.8c-1.87,0-3.53,.62-5,1.85-1.47,1.23-2.2,2.98-2.2,5.25s.78,4.4,2.35,6.4c1.57,2,3.48,3.75,5.75,5.25,2.27,1.5,4.55,3.03,6.85,4.6,2.3,1.57,4.32,3.5,6.05,5.8,1.73,2.3,2.7,4.85,2.9,7.65,0,4.8-2.07,8.83-6.2,12.1-4.13,3.27-9.27,4.9-15.4,4.9s-10.95-1.23-14.45-3.7-5.25-5.3-5.25-8.5,.98-5.78,2.95-7.75,4.42-2.95,7.35-2.95c1.53,0,2.97,.27,4.3,.8-2.13,2.27-3.2,4.67-3.2,7.2s.7,4.57,2.1,6.1c1.4,1.53,3.3,2.3,5.7,2.3s4.42-.62,6.05-1.85c1.63-1.23,2.45-2.83,2.45-4.8s-.57-3.71-1.7-5.25c-1.13-1.53-2.55-2.88-4.25-4.05-1.7-1.17-3.55-2.48-5.55-3.95-2-1.46-3.85-2.95-5.55-4.45-1.7-1.5-3.12-3.4-4.25-5.7-1.13-2.3-1.7-4.82-1.7-7.55,0-4.73,1.95-8.62,5.85-11.65,3.9-3.03,8.77-4.55,14.6-4.55s10.1,1.13,12.8,3.4c2.7,2.27,4.05,4.92,4.05,7.95s-.95,5.62-2.85,7.75c-1.9,2.13-4.35,3.2-7.35,3.2-1.47,0-3.13-.3-5-.9,1.47-1.27,2.6-2.71,3.4-4.35,.8-1.63,1.2-3.25,1.2-4.85s-.67-2.95-2-4.05c-1.33-1.1-2.93-1.65-4.8-1.65Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i (second) -->
|
||||
<path d="M323.64,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- o (second) -->
|
||||
<path d="M360.09,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.34,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75-4.3-4.5-6.45-10.97-6.45-19.4s2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- n -->
|
||||
<path d="M438.99,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i (third) -->
|
||||
<path d="M480.04,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05-1.8-2.7-2.7-6.65-2.7-11.85,0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- n (second) -->
|
||||
<path d="M533.69,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- g -->
|
||||
<path d="M588.59,25.9c1.27,0,2.23,.07,2.9,.2,1.73,.33,2.67,1.57,2.8,3.7-7.27,1.53-13.05,5.47-17.35,11.8-4.3,6.33-6.45,12.93-6.45,19.8,0,8,2.43,12,7.3,12,2.93,0,5.57-1.6,7.9-4.8,4.13-5.8,7.03-14.87,8.7-27.2,1.27-9.73,3.63-16,7.1-18.8,1.67-1.4,3.73-2.5,6.2-3.3-.93,7.07-1.4,12.4-1.4,16,0,26.67-2.85,46.7-8.55,60.1-5.7,13.4-14.98,20.1-27.85,20.1-5.2,0-9.27-1.38-12.2-4.15-2.93-2.77-4.4-5.8-4.4-9.1s1.03-6,3.1-8.1c2.07-2.1,4.96-3.15,8.7-3.15,1.53,0,3.1,.33,4.7,1-2.53,1.67-3.8,4.23-3.8,7.7,0,2.33,.7,4.35,2.1,6.05,1.4,1.7,3.12,2.55,5.15,2.55s3.82-.42,5.35-1.25c1.53-.83,3.1-2.32,4.7-4.45,1.6-2.13,3-4.8,4.2-8,2.73-7.4,4.23-17.5,4.5-30.3-1.93,5.73-4.87,10.33-8.8,13.8-3.93,3.47-7.93,5.2-12,5.2-5.13,0-9.05-1.95-11.75-5.85-2.7-3.9-4.05-8.88-4.05-14.95,0-7.07,1.7-13.63,5.1-19.7,3.8-7,9.07-11.87,15.8-14.6,3.73-1.53,7.83-2.3,12.3-2.3Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="2.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Brush underline -->
|
||||
<g>
|
||||
<path d="M20,95 L580,95" stroke="url(#textGradient)" stroke-width="4" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="stroke-dasharray" values="0,560;560,0" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;1;1" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M20,95 L580,95" stroke="#4cc2f1" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.3">
|
||||
<animate attributeName="stroke-dasharray" values="0,560;560,0" dur="5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.3;0.3" dur="5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<circle cx="580" cy="95" r="0" fill="url(#textGradient)">
|
||||
<animate attributeName="r" values="0;2;0" dur="0.6s" begin="4.7s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="0.6s" begin="4.7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,161 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 359.49 230.13">
|
||||
<defs>
|
||||
<clipPath id="d">
|
||||
<path d="M226.79,113.62c0,19.36,15.85,35.06,35.4,35.06,19.55,0,35.4-15.7,35.4-35.06,0-19.36-15.85-35.06-35.4-35.06h0c-42.68,0-35.4,15.7-35.4,35.06" style="fill:none;"/>
|
||||
</clipPath>
|
||||
|
||||
<!-- Animated gradient for connecting elements -->
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g id="c">
|
||||
<g>
|
||||
<!-- Left wheel - only outer shape rotates -->
|
||||
<g>
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 115.86 113.25;360 115.86 113.25"
|
||||
dur="8s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel - only outer shape rotates -->
|
||||
<g>
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 261.91 113.28;-360 261.91 113.28"
|
||||
dur="6s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel center -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff;"/>
|
||||
<path d="M116.42,100.38c.2,0,.37,.16,.37,.36s-.16,.37-.37,.37c-.2,0-.37-.16-.37-.36,0,0,0,0,0,0,0-.2,.16-.36,.37-.37h0Zm1.38-4.53v-4.06h1.55c.82,.02,1.49-.63,1.51-1.43,.02-.81-.63-1.48-1.45-1.49-.02,0-.04,0-.06,0h-6.1c-.82-.02-1.49,.63-1.51,1.43-.02,.81,.63,1.48,1.45,1.49,.02,0,.04,0,.06,0h1.79v4.06m.14,18.68l6.92-9.15c.08-.11,.23-.13,.34-.05,.09,.07,.12,.19,.08,.29l-4.47,10.56c-.35,.84-1.32,1.23-2.16,.89-.07-.03-.14-.06-.2-.1-.8-.47-1.07-1.49-.6-2.28,.03-.05,.07-.11,.11-.16h0Zm-8.08-16.69l-1.86-3.97m2.09-.71l-3.98,1.86" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
|
||||
<!-- Green dot with smooth pulse -->
|
||||
<path d="M86.86,91.68c0-1.42,1.17-2.57,2.6-2.56,1.43,0,2.59,1.16,2.59,2.58,0,1.42-1.17,2.57-2.6,2.56-1.43,0-2.58-1.15-2.59-2.56v-.02Z" style="fill:#50a89c;">
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.3;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Connection elements forming infinity symbol - AGILE ANIMATION -->
|
||||
<!-- Top left part of infinity -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom left part of infinity -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Top right part of infinity -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom right part of infinity -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Additional elements -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central flow representing infinity -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;4;1" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Chronometer/clock with CSS pulse animation -->
|
||||
<g>
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224;">
|
||||
<!-- CSS-style pulse animation: scale + opacity -->
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.05;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity"
|
||||
values="1;0.75;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Chronometer display -->
|
||||
<g style="clip-path:url(#d);">
|
||||
<g>
|
||||
<path d="M329.9,88.02v57.19c0,1.92-1.57,3.47-3.51,3.47h-89.87c-1.94,0-3.51-1.55-3.51-3.47v-57.19c0-1.92,1.57-3.47,3.51-3.47h89.87c1.94,0,3.51,1.55,3.51,3.47" style="fill:#5e74b7;"/>
|
||||
<path d="M236.69,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#dba0a6;"/>
|
||||
<path d="M238.63,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#f5cc56;"/>
|
||||
<path d="M240.56,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#263682;"/>
|
||||
<path d="M237.73,89.86h87.43c.92,0,1.66,.74,1.66,1.64s-.74,1.64-1.66,1.64h-87.43c-.92,0-1.66-.74-1.66-1.64s.74-1.64,1.66-1.64m-1.16,9.24h22.25v45.29h-22.25v-45.29Zm23.91,0h64.88v45.29h-64.88v-45.29Z" style="fill:#f3f4f5;"/>
|
||||
|
||||
<!-- Animated chart -->
|
||||
<path d="M265.45,108.82v13.02h53.62v-9.61s-3.47,2.93-5.61,2.93c-3.49,0-5.5-2.32-7.99-2.27-3.52,.07-4.32,2.03-7.04,2.27-3.57,.31-4.73-4.21-9.35-4.47-4.62-.27-6.46,4.96-10.78,4.65-3.26-.23-6.17-5.71-8.31-6.51-1.48-.45-3.06-.45-4.53,0" style="fill:#f2ac41;">
|
||||
<!-- Real-time data animation -->
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1,1;1.02,1.1;1,1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<path d="M239.78,102.82h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Z" style="fill:#8d9ccf;"/>
|
||||
<path d="M284.39,127.69h16.01v11.29h-16.01v-11.29Zm-18.94,0h16.01v11.29h-16.01v-11.29Zm37.61,0h16.01v11.29h-16.01v-11.29Zm-56.48-22.8h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.7h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.79h9.27v1.08h-9.27v-1.08Z" style="fill:#d1d9e0;"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green indicator with CSS pulse animation -->
|
||||
<ellipse cx="287.99" cy="132.27" rx="11.69" ry="11.58" style="fill:#05ab9e;">
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.05;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity"
|
||||
values="1;0.8;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Animated check mark -->
|
||||
<path d="M281.89,131.18l4.78,4.73,8.02-7.94" style="fill:none; stroke:#fff; stroke-width:4px;">
|
||||
<animate attributeName="stroke-dasharray"
|
||||
values="0 20;20 20"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,243 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 607.69 366">
|
||||
<defs>
|
||||
<!-- Logo defs -->
|
||||
<clipPath id="logo-clip">
|
||||
<path d="M226.79,113.62c0,19.36,15.85,35.06,35.4,35.06,19.55,0,35.4-15.7,35.4-35.06,0-19.36-15.85-35.06-35.4-35.06h0c-42.68,0-35.4,15.7-35.4,35.06" style="fill:none;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Text defs -->
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#4cc2f1;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#4cc2f1;#f2b03f;#4cc2f1" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#f2b03f;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#f2b03f;#4cc2f1;#f2b03f" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#4cc2f1;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#4cc2f1;#f2b03f;#4cc2f1" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="particleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:0.8">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="2s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#7B2BFF;stop-opacity:0.8">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="2s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Logo icon centered: offset X = (607.69 - 359.49) / 2 = 124.1 -->
|
||||
<g transform="translate(124.1, 0)">
|
||||
<g>
|
||||
<!-- Left wheel -->
|
||||
<g>
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 115.86 113.25;360 115.86 113.25" dur="8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel -->
|
||||
<g>
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0 261.91 113.28;-360 261.91 113.28" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel center -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff;"/>
|
||||
<path d="M116.42,100.38c.2,0,.37,.16,.37,.36s-.16,.37-.37,.37c-.2,0-.37-.16-.37-.36,0,0,0,0,0,0,0-.2,.16-.36,.37-.37h0Zm1.38-4.53v-4.06h1.55c.82,.02,1.49-.63,1.51-1.43,.02-.81-.63-1.48-1.45-1.49-.02,0-.04,0-.06,0h-6.1c-.82-.02-1.49,.63-1.51,1.43-.02,.81,.63,1.48,1.45,1.49,.02,0,.04,0,.06,0h1.79v4.06m.14,18.68l6.92-9.15c.08-.11,.23-.13,.34-.05,.09,.07,.12,.19,.08,.29l-4.47,10.56c-.35,.84-1.32,1.23-2.16,.89-.07-.03-.14-.06-.2-.1-.8-.47-1.07-1.49-.6-2.28,.03-.05,.07-.11,.11-.16h0Zm-8.08-16.69l-1.86-3.97m2.09-.71l-3.98,1.86" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
|
||||
<!-- Green dot -->
|
||||
<path d="M86.86,91.68c0-1.42,1.17-2.57,2.6-2.56,1.43,0,2.59,1.16,2.59,2.58,0,1.42-1.17,2.57-2.6,2.56-1.43,0-2.58-1.15-2.59-2.56v-.02Z" style="fill:#50a89c;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity connection top-left -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity bottom-left -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity top-right -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Infinity bottom-right -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Static connection elements -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central infinity flow -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;4;1" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Chronometer -->
|
||||
<g>
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.05;1" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.75;1" dur="2s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<g style="clip-path:url(#logo-clip);">
|
||||
<g>
|
||||
<path d="M329.9,88.02v57.19c0,1.92-1.57,3.47-3.51,3.47h-89.87c-1.94,0-3.51-1.55-3.51-3.47v-57.19c0-1.92,1.57-3.47,3.51-3.47h89.87c1.94,0,3.51,1.55,3.51,3.47" style="fill:#5e74b7;"/>
|
||||
<path d="M236.69,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#dba0a6;"/>
|
||||
<path d="M238.63,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#f5cc56;"/>
|
||||
<path d="M240.56,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#263682;"/>
|
||||
<path d="M237.73,89.86h87.43c.92,0,1.66,.74,1.66,1.64s-.74,1.64-1.66,1.64h-87.43c-.92,0-1.66-.74-1.66-1.64s.74-1.64,1.66-1.64m-1.16,9.24h22.25v45.29h-22.25v-45.29Zm23.91,0h64.88v45.29h-64.88v-45.29Z" style="fill:#f3f4f5;"/>
|
||||
|
||||
<path d="M265.45,108.82v13.02h53.62v-9.61s-3.47,2.93-5.61,2.93c-3.49,0-5.5-2.32-7.99-2.27-3.52,.07-4.32,2.03-7.04,2.27-3.57,.31-4.73-4.21-9.35-4.47-4.62-.27-6.46,4.96-10.78,4.65-3.26-.23-6.17-5.71-8.31-6.51-1.48-.45-3.06-.45-4.53,0" style="fill:#f2ac41;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1,1;1.02,1.1;1,1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<path d="M239.78,102.82h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Z" style="fill:#8d9ccf;"/>
|
||||
<path d="M284.39,127.69h16.01v11.29h-16.01v-11.29Zm-18.94,0h16.01v11.29h-16.01v-11.29Zm37.61,0h16.01v11.29h-16.01v-11.29Zm-56.48-22.8h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.7h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.79h9.27v1.08h-9.27v-1.08Z" style="fill:#d1d9e0;"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green indicator -->
|
||||
<ellipse cx="287.99" cy="132.27" rx="11.69" ry="11.58" style="fill:#05ab9e;">
|
||||
<animateTransform attributeName="transform" type="scale" values="1;1.05;1" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.8;1" dur="2s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Check mark -->
|
||||
<path d="M281.89,131.18l4.78,4.73,8.02-7.94" style="fill:none; stroke:#fff; stroke-width:4px;">
|
||||
<animate attributeName="stroke-dasharray" values="0 20;20 20" dur="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Text "provisioning" below logo: Y offset = 230.13 + 20 gap = 250 -->
|
||||
<g transform="translate(0, 250)">
|
||||
<!-- Floating particles -->
|
||||
<g>
|
||||
<circle cx="50" cy="30" r="2" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;10,5;0,0" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="150" cy="20" r="1.5" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-8,7;0,0" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="250" cy="25" r="2.5" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;12,-6;0,0" dur="3.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.9;0.4" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="350" cy="15" r="1.8" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-6,8;0,0" dur="4.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="4.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="450" cy="35" r="2.2" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;9,-4;0,0" dur="3.8s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="550" cy="28" r="1.6" style="fill:url(#particleGradient);">
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-7,9;0,0" dur="4.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="4.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Letters -->
|
||||
<g>
|
||||
<!-- p -->
|
||||
<path d="M6.89,82.3c-1.67-1.33-2.5-3.57-2.5-6.7s1.12-12.62,3.35-28.45c2.23-15.83,3.35-27.13,3.35-33.9s-.47-11.18-1.4-13.25c6.8,.53,11.27,3.2,13.4,8,5.13-2.8,10.78-4.2,16.95-4.2s11.03,1.92,14.6,5.75c3.57,3.83,5.35,8.55,5.35,14.15,0,6.93-2.54,13.2-7.6,18.8-2.47,2.67-5.65,4.83-9.55,6.5-3.9,1.67-8.22,2.5-12.95,2.5-2,0-3.9-.13-5.7-.4l-.3-4.2h.8c7.53,0,13.53-2.8,18-8.4,3.07-4,4.6-8.2,4.6-12.6,0-6.47-2.63-10.73-7.9-12.8-4.47-1.67-9.47-1.33-15,1v.2c0,2.53-.95,10.82-2.85,24.85-1.9,14.03-2.85,25.75-2.85,35.15,0,4.2,.2,7.47,.6,9.8-2.13,.13-3.53,.2-4.2,.2-3.8,0-6.53-.67-8.2-2Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- r -->
|
||||
<path d="M80.19,50.1c2.4-8.67,5.28-15.05,8.65-19.15c3.37-4.1,6.5-6.15,9.4-6.15s5.08,1.08,6.55,3.25c1.47,2.17,2.2,4.97,2.2,8.4s-1.02,6.58-3.05,9.45c-2.03,2.87-4.82,4.3-8.35,4.3-.93,0-2.04-.27-3.3-.8,2.07-2.6,3.1-5.73,3.1-9.4,0-2.13-.87-3.2-2.6-3.2-1.27,0-2.63,.88-4.1,2.65-1.47,1.77-2.87,4.2-4.2,7.3-1.33,3.1-2.45,7.07-3.35,11.9-.9,4.83-1.35,9.98-1.35,15.45,0,.67,.17,3.5,.5,8.5-2.13,.13-3.5,.2-4.1,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.13,2.9,9.9s-.3,7.38-.9,10.85Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- o -->
|
||||
<path d="M132.39,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.33,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75s-6.45-10.97-6.45-19.4,2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- v -->
|
||||
<path d="M193.09,82.6c-2.13,.93-4.37,1.4-6.7,1.4s-3.63-.5-3.9-1.5c-1.07-4.27-2.3-10.65-3.7-19.15s-2.82-15.93-4.25-22.3c-1.43-6.37-3.15-11.18-5.15-14.45,3.67-1.73,6.6-2.6,8.8-2.6s3.87,.5,5,1.5c1.13,1,2.08,2.98,2.85,5.95,.77,2.97,1.32,5.42,1.65,7.35,.93,6.4,1.4,9.97,1.4,10.7s.27,3.72,.8,8.95c.53,5.23,.93,8.68,1.2,10.35,11.87-23,17.8-38.37,17.8-46.1,5.47,2.8,8.2,5.83,8.2,9.1,0,2.67-1.38,6.62-4.15,11.85-2.77,5.23-6.23,11.57-10.4,19-4.17,7.43-7.32,14.08-9.45,19.95Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i -->
|
||||
<path d="M241.34,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- s -->
|
||||
<path d="M278.59,30.8c-1.87,0-3.53,.62-5,1.85-1.47,1.23-2.2,2.98-2.2,5.25s.78,4.4,2.35,6.4c1.57,2,3.48,3.75,5.75,5.25,2.27,1.5,4.55,3.03,6.85,4.6,2.3,1.57,4.32,3.5,6.05,5.8,1.73,2.3,2.7,4.85,2.9,7.65,0,4.8-2.07,8.83-6.2,12.1-4.13,3.27-9.27,4.9-15.4,4.9s-10.95-1.23-14.45-3.7-5.25-5.3-5.25-8.5,.98-5.78,2.95-7.75,4.42-2.95,7.35-2.95c1.53,0,2.97,.27,4.3,.8-2.13,2.27-3.2,4.67-3.2,7.2s.7,4.57,2.1,6.1c1.4,1.53,3.3,2.3,5.7,2.3s4.42-.62,6.05-1.85c1.63-1.23,2.45-2.83,2.45-4.8s-.57-3.71-1.7-5.25c-1.13-1.53-2.55-2.88-4.25-4.05-1.7-1.17-3.55-2.48-5.55-3.95-2-1.46-3.85-2.95-5.55-4.45-1.7-1.5-3.12-3.4-4.25-5.7-1.13-2.3-1.7-4.82-1.7-7.55,0-4.73,1.95-8.62,5.85-11.65,3.9-3.03,8.77-4.55,14.6-4.55s10.1,1.13,12.8,3.4c2.7,2.27,4.05,4.92,4.05,7.95s-.95,5.62-2.85,7.75c-1.9,2.13-4.35,3.2-7.35,3.2-1.47,0-3.13-.3-5-.9,1.47-1.27,2.6-2.71,3.4-4.35,.8-1.63,1.2-3.25,1.2-4.85s-.67-2.95-2-4.05c-1.33-1.1-2.93-1.65-4.8-1.65Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i (second) -->
|
||||
<path d="M323.64,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- o (second) -->
|
||||
<path d="M360.09,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.34,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75-4.3-4.5-6.45-10.97-6.45-19.4s2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- n -->
|
||||
<path d="M438.99,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- i (third) -->
|
||||
<path d="M480.04,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05-1.8-2.7-2.7-6.65-2.7-11.85,0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="1.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- n (second) -->
|
||||
<path d="M533.69,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- g -->
|
||||
<path d="M588.59,25.9c1.27,0,2.23,.07,2.9,.2,1.73,.33,2.67,1.57,2.8,3.7-7.27,1.53-13.05,5.47-17.35,11.8-4.3,6.33-6.45,12.93-6.45,19.8,0,8,2.43,12,7.3,12,2.93,0,5.57-1.6,7.9-4.8,4.13-5.8,7.03-14.87,8.7-27.2,1.27-9.73,3.63-16,7.1-18.8,1.67-1.4,3.73-2.5,6.2-3.3-.93,7.07-1.4,12.4-1.4,16,0,26.67-2.85,46.7-8.55,60.1-5.7,13.4-14.98,20.1-27.85,20.1-5.2,0-9.27-1.38-12.2-4.15-2.93-2.77-4.4-5.8-4.4-9.1s1.03-6,3.1-8.1c2.07-2.1,4.96-3.15,8.7-3.15,1.53,0,3.1,.33,4.7,1-2.53,1.67-3.8,4.23-3.8,7.7,0,2.33,.7,4.35,2.1,6.05,1.4,1.7,3.12,2.55,5.15,2.55s3.82-.42,5.35-1.25c1.53-.83,3.1-2.32,4.7-4.45,1.6-2.13,3-4.8,4.2-8,2.73-7.4,4.23-17.5,4.5-30.3-1.93,5.73-4.87,10.33-8.8,13.8-3.93,3.47-7.93,5.2-12,5.2-5.13,0-9.05-1.95-11.75-5.85-2.7-3.9-4.05-8.88-4.05-14.95,0-7.07,1.7-13.63,5.1-19.7,3.8-7,9.07-11.87,15.8-14.6,3.73-1.53,7.83-2.3,12.3-2.3Z" style="fill:url(#textGradient);">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" begin="2.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Brush underline -->
|
||||
<g>
|
||||
<path d="M20,95 L580,95" stroke="url(#textGradient)" stroke-width="4" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="stroke-dasharray" values="0,560;560,0" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;1;1" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M20,95 L580,95" stroke="#4cc2f1" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.3">
|
||||
<animate attributeName="stroke-dasharray" values="0,560;560,0" dur="5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.3;0.3" dur="5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<circle cx="580" cy="95" r="0" fill="url(#textGradient)">
|
||||
<animate attributeName="r" values="0;2;0" dur="0.6s" begin="4.7s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="0.6s" begin="4.7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 25 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 66 KiB |
|
|
@ -1,584 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
||||
<feOffset dx="0" dy="0"/>
|
||||
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1a3a52"/>
|
||||
<stop offset="70%" stop-color="#0f2a42"/>
|
||||
<stop offset="100%" stop-color="#081a32"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#162a1e"/>
|
||||
<stop offset="100%" stop-color="#0f1a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/>
|
||||
<stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/>
|
||||
<stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#162a38"/>
|
||||
<stop offset="100%" stop-color="#0f1a28"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/>
|
||||
<stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/>
|
||||
<stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/>
|
||||
<stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
||||
</marker>
|
||||
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
||||
</marker>
|
||||
<marker id="arrow-purple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#818cf8"/>
|
||||
</marker>
|
||||
<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
|
||||
</marker>
|
||||
<marker id="arrow-pink" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ec4899"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.04">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="640" y="34" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="62" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="3">TECHNICAL ARCHITECTURE</text>
|
||||
<line x1="540" y1="72" x2="740" y2="72" stroke="#555555" stroke-width="1"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CORE HUB -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer decorative ring (rotating) -->
|
||||
<g class="core-ring" opacity="0.6">
|
||||
<circle cx="640" cy="370" r="115" fill="none" stroke="#777777" stroke-width="1" stroke-dasharray="3 8"/>
|
||||
</g>
|
||||
|
||||
<!-- Core circle background -->
|
||||
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
||||
<circle cx="640" cy="370" r="100" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<circle cx="640" cy="370" r="96" fill="none" stroke="#1a1f2e" stroke-width="0.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Core hex accent -->
|
||||
<g opacity="0.35">
|
||||
<polygon points="640,280 707,310 707,430 640,460 573,430 573,310" fill="none" stroke="#0052ff" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Core labels -->
|
||||
<text x="640" y="335" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.9">Provisioning</text>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.9">Core</text>
|
||||
|
||||
<!-- Core sub-items -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#6b7a90">
|
||||
<rect x="590" y="376" width="38" height="18" rx="4" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="609" y="389" text-anchor="middle" fill="#4a9eff">CLI</text>
|
||||
|
||||
<rect x="634" y="376" width="50" height="18" rx="4" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="659" y="389" text-anchor="middle" fill="#4a9eff">Libs</text>
|
||||
|
||||
<rect x="596" y="400" width="88" height="18" rx="4" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="640" y="413" text-anchor="middle" fill="#4a9eff">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing dots on core ring -->
|
||||
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
||||
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
||||
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
||||
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
||||
<circle cx="711" cy="299" r="3" fill="#818cf8" class="dot-pulse dot-pulse-d4" opacity="0.6"/>
|
||||
<circle cx="569" cy="441" r="3" fill="#ec4899" class="dot-pulse dot-pulse-d5" opacity="0.6"/>
|
||||
<circle cx="711" cy="441" r="3" fill="#22d3ee" class="dot-pulse dot-pulse-d6" opacity="0.6"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONFIGURATION LAYER (Top) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → config -->
|
||||
<path d="M 640 270 L 640 208" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
|
||||
<!-- Green flow path -->
|
||||
<path d="M 640 270 L 640 208" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="490" y="98" width="300" height="97" rx="12" fill="url(#config-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="490" y="98" width="300" height="97" rx="12" fill="none" stroke="#1c3a28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="490" y="98" width="4" height="97" rx="2" fill="#34d399" opacity="0.6"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="516" cy="121" r="11" fill="#2d3748" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
||||
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">🔧</text>
|
||||
|
||||
<text x="534" y="125" fill="#c0d8cc" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Configuration Layer</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="506" y="140" width="110" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
||||
|
||||
<rect x="624" y="140" width="148" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
||||
|
||||
<rect x="506" y="170" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="546" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Type check</text>
|
||||
|
||||
<rect x="594" y="170" width="90" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="639" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Constraints</text>
|
||||
|
||||
<rect x="692" y="170" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="732" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Merge</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green status label -->
|
||||
<rect x="583" y="222" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
||||
<text x="605" y="234" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONTROL CENTER (Top-Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → control center -->
|
||||
<path d="M 711 299 C 770 260, 830 200, 883 159" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
<path d="M 711 299 C 770 260, 830 200, 884 148" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-dasharray="6 6" class="flow-purple" opacity="0.7" marker-end="url(#arrow-purple)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="895" y="98" width="260" height="105" rx="12" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="895" y="98" width="260" height="105" rx="12" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
|
||||
<rect x="1151" y="98" width="4" height="100" rx="2" fill="#818cf8" opacity="0.5"/>
|
||||
|
||||
<circle cx="921" cy="121" r="11" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="921" y="125" text-anchor="middle" fill="#818cf8" font-size="11">◉</text>
|
||||
|
||||
<text x="939" y="125" fill="#c0c0d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Control Center</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="913" y="140" width="100" height="20" rx="5" fill="#110f1e" stroke="#2e2848" stroke-width="0.8"/>
|
||||
<text x="963" y="154" text-anchor="middle" fill="#818cf8" opacity="0.9">Dashboard</text>
|
||||
|
||||
<rect x="1021" y="140" width="116" height="20" rx="5" fill="#110f1e" stroke="#2e2848" stroke-width="0.8"/>
|
||||
<text x="1079" y="154" text-anchor="middle" fill="#818cf8" opacity="0.9">Monitoring</text>
|
||||
|
||||
<rect x="913" y="172" width="55" height="18" rx="4" fill="none" stroke="#2e2848" stroke-width="0.6"/>
|
||||
<text x="941" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Alerts</text>
|
||||
|
||||
<rect x="975" y="172" width="55" height="18" rx="4" fill="none" stroke="#2e2848" stroke-width="0.6"/>
|
||||
<text x="1003" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Registry</text>
|
||||
|
||||
<rect x="1037" y="172" width="80" height="18" rx="4" fill="none" stroke="#2e2848" stroke-width="0.6"/>
|
||||
<text x="1077" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Authorizations</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<rect x="975" y="222" width="48" height="16" rx="8" fill="#818cf8" opacity="0.12"/>
|
||||
<text x="999" y="234" text-anchor="middle" fill="#818cf8" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">LIVE</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- EXTENSION ECOSYSTEM (Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → extensions -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
|
||||
<!-- Red flow path -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="1146" y="270" width="4" height="200" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="886" cy="297" r="11" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">⚙️</text>
|
||||
|
||||
<text x="904" y="301" fill="#d8c0c8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Extension Ecosystem</text>
|
||||
|
||||
<!-- Provider plugin cards -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- AWS -->
|
||||
<rect x="878" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
||||
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
||||
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
||||
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
||||
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="878" y="386" width="246" height="42" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1001" y="404" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
||||
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
||||
|
||||
<!-- Registry badge -->
|
||||
<rect x="870" y="438" width="270" height="20" rx="5" fill="none" stroke="#2a1620" stroke-width="0.6"/>
|
||||
<text x="1006" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red endpoints dots -->
|
||||
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
||||
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
|
||||
<!-- Output label -->
|
||||
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- ORCHESTRATION ENGINE (Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → orchestration -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
|
||||
<!-- Orange flow path -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="120" y="270" width="4" height="200" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="150" cy="297" r="11" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
||||
|
||||
<text x="168" y="301" fill="#d8ccc0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Orchestration Engine</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Batch Workflows -->
|
||||
<rect x="138" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
||||
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
||||
|
||||
<!-- Execution -->
|
||||
<rect x="268" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
||||
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
||||
|
||||
<!-- State Management -->
|
||||
<rect x="138" y="370" width="250" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
||||
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
||||
|
||||
<!-- Pipeline status -->
|
||||
<g opacity="0.6">
|
||||
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#2a2016" stroke-width="0.6"/>
|
||||
<!-- Pipeline dots -->
|
||||
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
||||
<line x1="176" y1="433" x2="208" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
||||
<line x1="216" y1="433" x2="248" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
||||
<line x1="256" y1="433" x2="288" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
||||
<line x1="296" y1="433" x2="328" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- USER INPUT (Top-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Blue arrow: user input → CLI → Core -->
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<!-- User input node -->
|
||||
<g>
|
||||
<rect x="120" y="91" width="150" height="67" rx="10" fill="url(#core-grad)" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="120" y="96" width="4" height="57" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<circle cx="147" cy="113" r="10" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="147" y="117" text-anchor="middle" fill="#4a9eff" font-size="10">⌨️</text>
|
||||
|
||||
<text x="167" y="117" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.8">INPUT</text>
|
||||
<text x="142" y="143" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
||||
</g>
|
||||
|
||||
<!-- Blue flow label -->
|
||||
<rect x="331" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
||||
<text x="363" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- WORKSPACE RUNTIME (Bottom) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → workspace -->
|
||||
<path d="M 640 470 L 640 550" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
<path d="M 640 470 L 640 550" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="504" y="565" width="270" height="95" rx="12" fill="url(#ws-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="504" y="565" width="270" height="95" rx="12" fill="none" stroke="#1c2a38" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar bottom -->
|
||||
<rect x="504" y="656" width="270" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="545" cy="584" r="10" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="545" y="588" text-anchor="middle" fill="#4a9eff" font-size="10">📁</text>
|
||||
|
||||
<text x="565" y="587" fill="#c0c8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Workspace Runtime</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="538" y="601" width="95" height="20" rx="5" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="585" y="615" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
||||
|
||||
<rect x="641" y="601" width="100" height="20" rx="5" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="691" y="615" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Env</text>
|
||||
|
||||
<rect x="568" y="630" width="155" height="20" rx="5" fill="#0f1a2e" stroke="#1c3a5a" stroke-width="0.8"/>
|
||||
<text x="645" y="644" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VAULT SERVICE (Bottom-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<path d="M 569 441 C 520 480, 430 535, 372 574" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
<path d="M 569 441 C 520 480, 430 535, 372 574" fill="none" stroke="#ec4899" stroke-width="1.5" stroke-dasharray="6 6" class="flow-pink" opacity="0.7" marker-end="url(#arrow-pink)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="555" width="240" height="95" rx="12" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="555" width="240" height="95" rx="12" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
|
||||
<rect x="120" y="555" width="4" height="95" rx="2" fill="#ec4899" opacity="0.5"/>
|
||||
|
||||
<circle cx="150" cy="578" r="11" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="582" text-anchor="middle" fill="#ec4899" font-size="11">🛡️</text>
|
||||
|
||||
<text x="168" y="582" fill="#d8c0d0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Vault Service</text>
|
||||
<text x="350" y="582" text-anchor="end" fill="#d8c0d0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">PQC</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="138" y="595" width="80" height="20" rx="5" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.8"/>
|
||||
<text x="178" y="609" text-anchor="middle" fill="#ec4899" opacity="0.9">Secrets</text>
|
||||
|
||||
<rect x="226" y="595" width="116" height="20" rx="5" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.8"/>
|
||||
<text x="284" y="609" text-anchor="middle" fill="#ec4899" opacity="0.9">Encryption</text>
|
||||
|
||||
<rect x="138" y="622" width="204" height="16" rx="4" fill="none" stroke="#3a1c30" stroke-width="0.6"/>
|
||||
<text x="240" y="634" text-anchor="middle" fill="#5a3850" font-size="9">SOPS · Age · Key Rotation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M 360 595 L 450 595" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.4"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- AI-RAG-MCP (Bottom-Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<path d="M 711 441 C 790 480, 860 535, 904 573" fill="none" stroke="#000000" stroke-width="1.5"/>
|
||||
<path d="M 711 441 C 790 480, 860 535, 904 573" fill="none" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="6 6" class="flow-cyan" opacity="0.7" marker-end="url(#arrow-cyan)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="915" y="555" width="250" height="95" rx="12" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="915" y="555" width="250" height="95" rx="12" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
|
||||
<rect x="1161" y="555" width="4" height="95" rx="2" fill="#22d3ee" opacity="0.5"/>
|
||||
|
||||
<circle cx="941" cy="578" r="11" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="941" y="582" text-anchor="middle" fill="#22d3ee" font-size="11">🧠</text>
|
||||
|
||||
<text x="959" y="582" fill="#c0d8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">AI · RAG · MCP</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="933" y="595" width="100" height="20" rx="5" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.8"/>
|
||||
<text x="983" y="609" text-anchor="middle" fill="#22d3ee" opacity="0.9">RAG Engine</text>
|
||||
|
||||
<rect x="1041" y="595" width="106" height="20" rx="5" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.8"/>
|
||||
<text x="1094" y="609" text-anchor="middle" fill="#22d3ee" opacity="0.9">MCP Server</text>
|
||||
|
||||
<rect x="933" y="622" width="214" height="16" rx="4" fill="none" stroke="#1c3038" stroke-width="0.6"/>
|
||||
<text x="1040" y="634" text-anchor="middle" fill="#385a58" font-size="9">Embeddings · Knowledge · Tools</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M 915 595 L 870 595" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.4"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Vertical connectors from workspace to targets -->
|
||||
<path d="M 504 655 Q 430 690, 260 720" fill="none" stroke="#1e2535" stroke-width="1"/>
|
||||
<path d="M 504 655 Q 430 690, 260 720" fill="none" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="580" y1="665" x2="490" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="580" y1="665" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="710" y1="665" x2="720" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="710" y1="665" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<path d="M 774 655 Q 840 690, 950 720" fill="none" stroke="#1e2535" stroke-width="1"/>
|
||||
<path d="M 774 655 Q 840 690, 950 720" fill="none" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<!-- Target nodes -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Production -->
|
||||
<rect x="178" y="720" width="160" height="54" rx="10" fill="#2a1515" stroke="#2a1010" stroke-width="1"/>
|
||||
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="214" y="744" fill="#d0a0a0" font-size="11" font-weight="500">Production</text>
|
||||
<text x="200" y="762" fill="#5a3838" font-size="9">us-east-1 · 3 replicas</text>
|
||||
|
||||
<!-- Staging -->
|
||||
<rect x="408" y="720" width="160" height="54" rx="10" fill="#2a2010" stroke="#1a1810" stroke-width="1"/>
|
||||
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="444" y="744" fill="#d0c0a0" font-size="11" font-weight="500">Staging</text>
|
||||
<text x="430" y="762" fill="#5a5038" font-size="9">eu-west-1 · 1 replica</text>
|
||||
|
||||
<!-- Dev / K8s -->
|
||||
<rect x="638" y="720" width="160" height="54" rx="10" fill="#1a2820" stroke="#0a1810" stroke-width="1"/>
|
||||
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="674" y="744" fill="#a0d0b8" font-size="11" font-weight="500">Dev Cluster</text>
|
||||
<text x="660" y="762" fill="#385a48" font-size="9">k8s · minikube</text>
|
||||
|
||||
<!-- Edge / Custom -->
|
||||
<rect x="868" y="720" width="160" height="54" rx="10" fill="#1a182a" stroke="#0a0a1a" stroke-width="1"/>
|
||||
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="904" y="744" fill="#b0b0d8" font-size="11" font-weight="500">Edge / Custom</text>
|
||||
<text x="890" y="762" fill="#48486a" font-size="9">IoT · on-prem</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(370, 810)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<!-- Column 1 -->
|
||||
<text x="40" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
||||
|
||||
<line x1="40" y1="14" x2="64" y2="14" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="18" fill="#4a6a8a">User input</text>
|
||||
|
||||
<line x1="40" y1="30" x2="64" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="34" fill="#4a7a5a">Config validation</text>
|
||||
|
||||
<line x1="40" y1="46" x2="64" y2="46" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="50" fill="#7a6a3a">Task orchestration</text>
|
||||
|
||||
<line x1="40" y1="62" x2="64" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="66" fill="#7a3a3a">Cloud output</text>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<text x="280" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">PLATFORM</text>
|
||||
|
||||
<line x1="280" y1="14" x2="304" y2="14" stroke="#818cf8" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="18" fill="#5a5a8a">Control center</text>
|
||||
|
||||
<line x1="280" y1="30" x2="304" y2="30" stroke="#ec4899" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="34" fill="#8a3a6a">Vault service</text>
|
||||
|
||||
<line x1="280" y1="46" x2="304" y2="46" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="50" fill="#3a7a8a">AI · RAG · MCP</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CROSS-CONNECTIONS (subtle) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Config → Orchestration (dotted) -->
|
||||
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
||||
|
||||
<!-- Orchestration → Extensions (through core) -->
|
||||
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- Config → Extensions (through core) -->
|
||||
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VERSION BADGE -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<text x="1236" y="880" text-anchor="end" fill="#7a8090" font-family="'IBM Plex Mono', monospace" font-size="10" letter-spacing="0.5">v3.0.11 · Architecture</text>
|
||||
|
||||
<!-- Logo reference -->
|
||||
<image x="1105" y="794" width="100" height="64" href="provisioning.svg"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 34 KiB |
|
|
@ -1,253 +0,0 @@
|
|||
<svg viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Gradients -->
|
||||
<linearGradient id="coreGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="configGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="extensionGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="orchestrationGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="runtimeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrowBlue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
|
||||
</marker>
|
||||
<marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#10b981" />
|
||||
</marker>
|
||||
<marker id="arrowOrange" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#f59e0b" />
|
||||
</marker>
|
||||
<marker id="arrowRed" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#ef4444" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="900" fill="#f8fafc"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="600" y="35" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#1e293b">
|
||||
Infrastructure Provisioning System Architecture
|
||||
</text>
|
||||
|
||||
<!-- Data Flow Legend -->
|
||||
<g transform="translate(50, 60)">
|
||||
<text x="0" y="0" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#475569">Data Flows:</text>
|
||||
<line x1="0" y1="10" x2="40" y2="10" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrowBlue)"/>
|
||||
<text x="45" y="14" font-family="Arial, sans-serif" font-size="11" fill="#64748b">User Input</text>
|
||||
|
||||
<line x1="120" y1="10" x2="160" y2="10" stroke="#10b981" stroke-width="2" marker-end="url(#arrowGreen)"/>
|
||||
<text x="165" y="14" font-family="Arial, sans-serif" font-size="11" fill="#64748b">Configuration</text>
|
||||
|
||||
<line x1="260" y1="10" x2="300" y2="10" stroke="#f59e0b" stroke-width="2" marker-end="url(#arrowOrange)"/>
|
||||
<text x="305" y="14" font-family="Arial, sans-serif" font-size="11" fill="#64748b">Task Flow</text>
|
||||
|
||||
<line x1="380" y1="10" x2="420" y2="10" stroke="#ef4444" stroke-width="2" marker-end="url(#arrowRed)"/>
|
||||
<text x="425" y="14" font-family="Arial, sans-serif" font-size="11" fill="#64748b">Cloud Output</text>
|
||||
</g>
|
||||
|
||||
<!-- Central Core -->
|
||||
<g id="core">
|
||||
<circle cx="600" cy="400" r="80" fill="url(#coreGrad)" opacity="0.9"/>
|
||||
<circle cx="600" cy="400" r="78" fill="none" stroke="#ffffff" stroke-width="2"/>
|
||||
<text x="600" y="390" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff">
|
||||
Provisioning
|
||||
</text>
|
||||
<text x="600" y="410" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff">
|
||||
Core
|
||||
</text>
|
||||
|
||||
<!-- Core Components -->
|
||||
<circle cx="600" cy="360" r="8" fill="#ffffff" opacity="0.8"/>
|
||||
<text x="600" y="348" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#ffffff">CLI</text>
|
||||
|
||||
<circle cx="570" cy="420" r="8" fill="#ffffff" opacity="0.8"/>
|
||||
<text x="555" y="440" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#ffffff">Libraries</text>
|
||||
|
||||
<circle cx="630" cy="420" r="8" fill="#ffffff" opacity="0.8"/>
|
||||
<text x="640" y="440" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#ffffff">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Configuration Layer (Top Left) -->
|
||||
<g id="configLayer">
|
||||
<rect x="180" y="180" width="200" height="140" rx="8" fill="url(#configGrad)" opacity="0.15" stroke="#06b6d4" stroke-width="2"/>
|
||||
<text x="280" y="205" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#0891b2">
|
||||
Configuration Layer
|
||||
</text>
|
||||
|
||||
<!-- Sub-components -->
|
||||
<rect x="200" y="225" width="160" height="35" rx="4" fill="#ffffff" stroke="#06b6d4" stroke-width="1.5"/>
|
||||
<text x="280" y="247" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#0e7490">
|
||||
Nickel Schemas
|
||||
</text>
|
||||
|
||||
<rect x="200" y="270" width="160" height="35" rx="4" fill="#ffffff" stroke="#06b6d4" stroke-width="1.5"/>
|
||||
<text x="280" y="292" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#0e7490">
|
||||
Validation Engine
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Extension Ecosystem (Top Right) -->
|
||||
<g id="extensionLayer">
|
||||
<rect x="820" y="180" width="200" height="140" rx="8" fill="url(#extensionGrad)" opacity="0.15" stroke="#10b981" stroke-width="2"/>
|
||||
<text x="920" y="205" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#059669">
|
||||
Extension Ecosystem
|
||||
</text>
|
||||
|
||||
<!-- Provider plugins -->
|
||||
<rect x="840" y="225" width="75" height="30" rx="4" fill="#ffffff" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="877" y="244" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#047857">Hetzner</text>
|
||||
|
||||
<rect x="925" y="225" width="75" height="30" rx="4" fill="#ffffff" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="962" y="244" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#047857">AWS</text>
|
||||
|
||||
<rect x="840" y="265" width="160" height="30" rx="4" fill="#ffffff" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="920" y="284" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#047857">Kubernetes Provider</text>
|
||||
</g>
|
||||
|
||||
<!-- Orchestration Engine (Bottom Left) -->
|
||||
<g id="orchestrationLayer">
|
||||
<rect x="180" y="520" width="200" height="160" rx="8" fill="url(#orchestrationGrad)" opacity="0.15" stroke="#f59e0b" stroke-width="2"/>
|
||||
<text x="280" y="545" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#d97706">
|
||||
Orchestration Engine
|
||||
</text>
|
||||
|
||||
<!-- Orchestration components -->
|
||||
<circle cx="230" cy="580" r="18" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="230" y="585" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#ffffff">B</text>
|
||||
<text x="230" y="610" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#d97706">Batch</text>
|
||||
|
||||
<circle cx="280" cy="580" r="18" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="280" y="585" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#ffffff">E</text>
|
||||
<text x="280" y="610" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#d97706">Execution</text>
|
||||
|
||||
<circle cx="330" cy="580" r="18" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="330" y="585" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#ffffff">S</text>
|
||||
<text x="330" y="610" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#d97706">State</text>
|
||||
|
||||
<rect x="200" y="630" width="160" height="35" rx="4" fill="#ffffff" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<text x="280" y="652" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#d97706">
|
||||
Workflow Manager
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Workspace Runtime (Bottom Right) -->
|
||||
<g id="runtimeLayer">
|
||||
<rect x="820" y="520" width="200" height="160" rx="8" fill="url(#runtimeGrad)" opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
|
||||
<text x="920" y="545" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#7c3aed">
|
||||
Workspace Runtime
|
||||
</text>
|
||||
|
||||
<!-- Runtime components -->
|
||||
<rect x="840" y="565" width="160" height="35" rx="4" fill="#ffffff" stroke="#8b5cf6" stroke-width="1.5"/>
|
||||
<text x="920" y="587" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#7c3aed">
|
||||
Context Management
|
||||
</text>
|
||||
|
||||
<rect x="840" y="610" width="160" height="35" rx="4" fill="#ffffff" stroke="#8b5cf6" stroke-width="1.5"/>
|
||||
<text x="920" y="632" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#7c3aed">
|
||||
Multi-Environment
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- User Input -->
|
||||
<g id="userInput">
|
||||
<rect x="520" y="120" width="160" height="50" rx="6" fill="#3b82f6" opacity="0.2" stroke="#3b82f6" stroke-width="2" stroke-dasharray="5,5"/>
|
||||
<text x="600" y="140" font-family="Arial, sans-serif" font-size="13" font-weight="600" text-anchor="middle" fill="#1e40af">
|
||||
👤 User Input
|
||||
</text>
|
||||
<text x="600" y="158" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#1e40af">
|
||||
Commands and Config
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Workspace Nodes at Bottom -->
|
||||
<g id="workspaces" transform="translate(300, 750)">
|
||||
<text x="300" y="-15" font-family="Arial, sans-serif" font-size="13" font-weight="600" text-anchor="middle" fill="#475569">
|
||||
Deployment Targets
|
||||
</text>
|
||||
|
||||
<rect x="50" y="0" width="140" height="60" rx="6" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
|
||||
<text x="120" y="22" font-family="Arial, sans-serif" font-size="12" font-weight="600" text-anchor="middle" fill="#334155">Development</text>
|
||||
<text x="120" y="38" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#64748b">workspace-dev</text>
|
||||
<text x="120" y="52" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#94a3b8">🔧 Testing</text>
|
||||
|
||||
<rect x="230" y="0" width="140" height="60" rx="6" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
|
||||
<text x="300" y="22" font-family="Arial, sans-serif" font-size="12" font-weight="600" text-anchor="middle" fill="#334155">Staging</text>
|
||||
<text x="300" y="38" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#64748b">workspace-staging</text>
|
||||
<text x="300" y="52" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#94a3b8">🧪 Pre-Production</text>
|
||||
|
||||
<rect x="410" y="0" width="140" height="60" rx="6" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
|
||||
<text x="480" y="22" font-family="Arial, sans-serif" font-size="12" font-weight="600" text-anchor="middle" fill="#334155">Production</text>
|
||||
<text x="480" y="38" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#64748b">workspace-prod</text>
|
||||
<text x="480" y="52" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#94a3b8">🚀 Live</text>
|
||||
</g>
|
||||
|
||||
<!-- Cloud Endpoints -->
|
||||
<g id="cloudEndpoints">
|
||||
<ellipse cx="1100" cy="350" rx="60" ry="35" fill="#ef4444" opacity="0.2" stroke="#ef4444" stroke-width="2"/>
|
||||
<text x="1100" y="350" font-family="Arial, sans-serif" font-size="11" font-weight="600" text-anchor="middle" fill="#dc2626">☁️ Hetzner</text>
|
||||
<text x="1100" y="365" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#b91c1c">Cloud Services</text>
|
||||
|
||||
<ellipse cx="1100" cy="430" rx="60" ry="35" fill="#ef4444" opacity="0.2" stroke="#ef4444" stroke-width="2"/>
|
||||
<text x="1100" y="430" font-family="Arial, sans-serif" font-size="11" font-weight="600" text-anchor="middle" fill="#dc2626">☁️ AWS</text>
|
||||
<text x="1100" y="445" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#b91c1c">Infrastructure</text>
|
||||
|
||||
<ellipse cx="1100" cy="510" rx="60" ry="35" fill="#ef4444" opacity="0.2" stroke="#ef4444" stroke-width="2"/>
|
||||
<text x="1100" y="510" font-family="Arial, sans-serif" font-size="11" font-weight="600" text-anchor="middle" fill="#dc2626">⎈ K8s</text>
|
||||
<text x="1100" y="525" font-family="Arial, sans-serif" font-size="9" text-anchor="middle" fill="#b91c1c">Clusters</text>
|
||||
</g>
|
||||
|
||||
<!-- Data Flow Arrows -->
|
||||
|
||||
<!-- Blue: User Input to Core -->
|
||||
<path d="M 600 170 L 600 320" fill="none" stroke="#3b82f6" stroke-width="3" marker-end="url(#arrowBlue)"/>
|
||||
|
||||
<!-- Green: Core to Configuration Layer -->
|
||||
<path d="M 540 360 Q 450 300 380 250" fill="none" stroke="#10b981" stroke-width="2.5" marker-end="url(#arrowGreen)"/>
|
||||
|
||||
<!-- Green: Configuration validation flow -->
|
||||
<path d="M 280 320 Q 280 360 520 380" fill="none" stroke="#10b981" stroke-width="2" marker-end="url(#arrowGreen)" stroke-dasharray="4,4"/>
|
||||
|
||||
<!-- Orange: Core to Orchestration -->
|
||||
<path d="M 550 450 Q 450 500 380 580" fill="none" stroke="#f59e0b" stroke-width="2.5" marker-end="url(#arrowOrange)"/>
|
||||
|
||||
<!-- Orange: Task flow within orchestration -->
|
||||
<line x1="248" y1="580" x2="262" y2="580" stroke="#f59e0b" stroke-width="2"/>
|
||||
<line x1="298" y1="580" x2="312" y2="580" stroke="#f59e0b" stroke-width="2"/>
|
||||
|
||||
<!-- Core to Extension Ecosystem -->
|
||||
<path d="M 660 360 Q 750 300 820 250" fill="none" stroke="#10b981" stroke-width="2.5" marker-end="url(#arrowGreen)"/>
|
||||
|
||||
<!-- Core to Runtime -->
|
||||
<path d="M 650 450 Q 750 500 820 580" fill="none" stroke="#8b5cf6" stroke-width="2.5"/>
|
||||
|
||||
<!-- Red: Extensions to Cloud Endpoints -->
|
||||
<path d="M 1020 240 Q 1060 280 1070 315" fill="none" stroke="#ef4444" stroke-width="2.5" marker-end="url(#arrowRed)"/>
|
||||
<path d="M 1020 265 Q 1050 340 1070 395" fill="none" stroke="#ef4444" stroke-width="2.5" marker-end="url(#arrowRed)"/>
|
||||
<path d="M 1020 280 Q 1050 400 1070 475" fill="none" stroke="#ef4444" stroke-width="2.5" marker-end="url(#arrowRed)"/>
|
||||
|
||||
<!-- Runtime to Workspaces -->
|
||||
<path d="M 880 680 L 680 735" fill="none" stroke="#8b5cf6" stroke-width="2" marker-end="url(#arrowBlue)" stroke-dasharray="3,3"/>
|
||||
<path d="M 920 680 L 720 735" fill="none" stroke="#8b5cf6" stroke-width="2" marker-end="url(#arrowBlue)" stroke-dasharray="3,3"/>
|
||||
<path d="M 960 680 L 760 735" fill="none" stroke="#8b5cf6" stroke-width="2" marker-end="url(#arrowBlue)" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Orchestration to Workspaces -->
|
||||
<path d="M 320 680 L 380 735" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="3,3"/>
|
||||
<path d="M 280 680 L 540 735" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="3,3"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,518 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Infrastructure Provisioning System — Architecture</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=DM+Sans:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: #0a0c10;
|
||||
color: #c8ccd4;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diagram-container {
|
||||
width: 1280px;
|
||||
height: 900px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Filters & Gradients defined in SVG defs */
|
||||
|
||||
/* Animations */
|
||||
@keyframes flowDash {
|
||||
to { stroke-dashoffset: -30; }
|
||||
}
|
||||
@keyframes flowDashReverse {
|
||||
to { stroke-dashoffset: 30; }
|
||||
}
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
@keyframes coreRotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes nodeAppear {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes dotPulse {
|
||||
0%, 100% { r: 3; opacity: 0.5; }
|
||||
50% { r: 5; opacity: 1; }
|
||||
}
|
||||
|
||||
.flow-blue { animation: flowDash 1.5s linear infinite; }
|
||||
.flow-green { animation: flowDash 2s linear infinite; }
|
||||
.flow-orange { animation: flowDash 1.8s linear infinite; }
|
||||
.flow-red { animation: flowDashReverse 1.6s linear infinite; }
|
||||
.pulse { animation: pulseGlow 3s ease-in-out infinite; }
|
||||
.core-ring { animation: coreRotate 60s linear infinite; transform-origin: 640px 370px; }
|
||||
|
||||
.node-group { animation: nodeAppear 0.6s ease-out both; }
|
||||
.node-group:nth-child(1) { animation-delay: 0.1s; }
|
||||
.node-group:nth-child(2) { animation-delay: 0.2s; }
|
||||
.node-group:nth-child(3) { animation-delay: 0.3s; }
|
||||
.node-group:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
.dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
|
||||
.dot-pulse-d1 { animation-delay: 0.3s; }
|
||||
.dot-pulse-d2 { animation-delay: 0.6s; }
|
||||
.dot-pulse-d3 { animation-delay: 0.9s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="diagram-container">
|
||||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
||||
<feOffset dx="0" dy="0"/>
|
||||
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1a1f2e"/>
|
||||
<stop offset="70%" stop-color="#12151f"/>
|
||||
<stop offset="100%" stop-color="#0d1017"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#162a1e"/>
|
||||
<stop offset="100%" stop-color="#0f1a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/>
|
||||
<stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/>
|
||||
<stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#16202a"/>
|
||||
<stop offset="100%" stop-color="#0f151a"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
||||
</marker>
|
||||
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.04">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="640" y="42" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="0.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="62" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="2">TECHNICAL ARCHITECTURE</text>
|
||||
<line x1="540" y1="72" x2="740" y2="72" stroke="#1e2230" stroke-width="1"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CORE HUB -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer decorative ring (rotating) -->
|
||||
<g class="core-ring" opacity="0.15">
|
||||
<circle cx="640" cy="370" r="115" fill="none" stroke="#4a9eff" stroke-width="0.5" stroke-dasharray="3 8"/>
|
||||
</g>
|
||||
|
||||
<!-- Core circle background -->
|
||||
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
||||
<circle cx="640" cy="370" r="100" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<circle cx="640" cy="370" r="96" fill="none" stroke="#1a1f2e" stroke-width="0.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Core hex accent -->
|
||||
<g opacity="0.08">
|
||||
<polygon points="640,280 692,310 692,430 640,460 588,430 588,310" fill="none" stroke="#4a9eff" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Core labels -->
|
||||
<text x="640" y="340" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Provisioning</text>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Core</text>
|
||||
|
||||
<!-- Core sub-items -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#6b7a90">
|
||||
<rect x="590" y="376" width="38" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="609" y="389" text-anchor="middle" fill="#7d8ba0">CLI</text>
|
||||
|
||||
<rect x="634" y="376" width="50" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="659" y="389" text-anchor="middle" fill="#7d8ba0">Libs</text>
|
||||
|
||||
<rect x="596" y="400" width="88" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="640" y="413" text-anchor="middle" fill="#7d8ba0">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing dots on core ring -->
|
||||
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
||||
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
||||
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
||||
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONFIGURATION LAYER (Top) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → config -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Green flow path -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="url(#config-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="none" stroke="#1c3a28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="490" y="98" width="4" height="92" rx="2" fill="#34d399" opacity="0.6"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="516" cy="121" r="11" fill="#0f1a14" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
||||
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">⚙</text>
|
||||
|
||||
<text x="534" y="125" fill="#c0d8cc" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Configuration Layer</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="506" y="140" width="110" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
||||
|
||||
<rect x="624" y="140" width="148" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
||||
|
||||
<rect x="506" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="546" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Type check</text>
|
||||
|
||||
<rect x="594" y="165" width="90" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="639" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Constraints</text>
|
||||
|
||||
<rect x="692" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="732" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Merge</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green status label -->
|
||||
<rect x="618" y="212" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
||||
<text x="640" y="224" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- EXTENSION ECOSYSTEM (Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → extensions -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Red flow path -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="1146" y="270" width="4" height="200" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="886" cy="297" r="11" fill="#1a0f14" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">◆</text>
|
||||
|
||||
<text x="904" y="301" fill="#d8c0c8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Extension Ecosystem</text>
|
||||
|
||||
<!-- Provider plugin cards -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- AWS -->
|
||||
<rect x="878" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
||||
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
||||
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
||||
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
||||
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="878" y="386" width="246" height="42" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1001" y="406" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
||||
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
||||
|
||||
<!-- Registry badge -->
|
||||
<rect x="878" y="438" width="246" height="20" rx="5" fill="none" stroke="#2a1620" stroke-width="0.6"/>
|
||||
<text x="1001" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red endpoints dots -->
|
||||
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
||||
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
|
||||
<!-- Output label -->
|
||||
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- ORCHESTRATION ENGINE (Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → orchestration -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Orange flow path -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="120" y="270" width="4" height="200" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="150" cy="297" r="11" fill="#1a150f" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
||||
|
||||
<text x="168" y="301" fill="#d8ccc0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Orchestration Engine</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Batch Workflows -->
|
||||
<rect x="138" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
||||
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
||||
|
||||
<!-- Execution -->
|
||||
<rect x="268" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
||||
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
||||
|
||||
<!-- State Management -->
|
||||
<rect x="138" y="370" width="250" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
||||
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
||||
|
||||
<!-- Pipeline status -->
|
||||
<g opacity="0.6">
|
||||
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#2a2016" stroke-width="0.6"/>
|
||||
<!-- Pipeline dots -->
|
||||
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
||||
<line x1="176" y1="433" x2="208" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
||||
<line x1="216" y1="433" x2="248" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
||||
<line x1="256" y1="433" x2="288" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
||||
<line x1="296" y1="433" x2="328" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- USER INPUT (Top-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Blue arrow: user input → CLI → Core -->
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<!-- User input node -->
|
||||
<g>
|
||||
<rect x="120" y="106" width="140" height="42" rx="10" fill="#0f1520" stroke="#1c2a3a" stroke-width="1" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="106" width="3" height="42" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<text x="147" y="124" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="9" font-weight="600" letter-spacing="0.5" opacity="0.7">USER INPUT</text>
|
||||
<text x="147" y="140" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
||||
</g>
|
||||
|
||||
<!-- Blue flow label -->
|
||||
<rect x="356" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
||||
<text x="388" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- WORKSPACE RUNTIME (Bottom) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → workspace -->
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="url(#ws-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="none" stroke="#1c283a" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar bottom -->
|
||||
<rect x="370" y="636" width="540" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="396" cy="577" r="11" fill="#0f151a" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="396" y="581" text-anchor="middle" fill="#4a9eff" font-size="11">⬡</text>
|
||||
|
||||
<text x="414" y="581" fill="#c0c8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Workspace Runtime</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="388" y="598" width="134" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="455" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
||||
|
||||
<rect x="530" y="598" width="172" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="616" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Environment</text>
|
||||
|
||||
<rect x="710" y="598" width="178" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="799" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Vertical connectors from workspace to targets -->
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<!-- Target nodes -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Production -->
|
||||
<rect x="178" y="720" width="160" height="54" rx="10" fill="#120f0f" stroke="#3a1c1c" stroke-width="1"/>
|
||||
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="214" y="744" fill="#d0a0a0" font-size="11" font-weight="500">Production</text>
|
||||
<text x="200" y="762" fill="#5a3838" font-size="9">us-east-1 · 3 replicas</text>
|
||||
|
||||
<!-- Staging -->
|
||||
<rect x="408" y="720" width="160" height="54" rx="10" fill="#12100f" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="444" y="744" fill="#d0c0a0" font-size="11" font-weight="500">Staging</text>
|
||||
<text x="430" y="762" fill="#5a5038" font-size="9">eu-west-1 · 1 replica</text>
|
||||
|
||||
<!-- Dev / K8s -->
|
||||
<rect x="638" y="720" width="160" height="54" rx="10" fill="#0f1210" stroke="#1c3a28" stroke-width="1"/>
|
||||
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="674" y="744" fill="#a0d0b8" font-size="11" font-weight="500">Dev Cluster</text>
|
||||
<text x="660" y="762" fill="#385a48" font-size="9">k8s · minikube</text>
|
||||
|
||||
<!-- Edge / Custom -->
|
||||
<rect x="868" y="720" width="160" height="54" rx="10" fill="#0f1015" stroke="#1c1c3a" stroke-width="1"/>
|
||||
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="904" y="744" fill="#b0b0d8" font-size="11" font-weight="500">Edge / Custom</text>
|
||||
<text x="890" y="762" fill="#48486a" font-size="9">IoT · on-prem</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(44, 720)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
||||
|
||||
<line x1="0" y1="14" x2="24" y2="14" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="18" fill="#4a6a8a">User input</text>
|
||||
|
||||
<line x1="0" y1="30" x2="24" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="34" fill="#4a7a5a">Config validation</text>
|
||||
|
||||
<line x1="0" y1="46" x2="24" y2="46" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="50" fill="#7a6a3a">Task orchestration</text>
|
||||
|
||||
<line x1="0" y1="62" x2="24" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="66" fill="#7a3a3a">Cloud output</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CROSS-CONNECTIONS (subtle) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Config → Orchestration (dotted) -->
|
||||
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
||||
|
||||
<!-- Orchestration → Extensions (through core) -->
|
||||
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- Config → Extensions (through core) -->
|
||||
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VERSION BADGE -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<text x="1236" y="880" text-anchor="end" fill="#2a2e38" font-family="'IBM Plex Mono', monospace" font-size="8" letter-spacing="0.5">v2.4.0 · Architecture</text>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,321 +0,0 @@
|
|||
<svg viewBox="0 0 1400 1000" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Definiciones -->
|
||||
<defs>
|
||||
<marker id="arrowblue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4A90E2" />
|
||||
</marker>
|
||||
<marker id="arrowgreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#50C878" />
|
||||
</marker>
|
||||
<marker id="arrowred" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#E74C3C" />
|
||||
</marker>
|
||||
<marker id="arroworange" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#FF8C42" />
|
||||
</marker>
|
||||
|
||||
<!-- Filtros de sombra -->
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="2" dy="2" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.3"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Fondo -->
|
||||
<rect width="1400" height="1000" fill="#F8F9FA"/>
|
||||
|
||||
<!-- Título -->
|
||||
<text x="700" y="35" font-size="28" font-weight="bold" text-anchor="middle" fill="#2C3E50">
|
||||
PROVISIONING SYSTEM ARCHITECTURE
|
||||
</text>
|
||||
|
||||
<!-- CAPA 1: USER INPUT (Azul) -->
|
||||
<g id="user-layer">
|
||||
<rect x="50" y="70" width="1300" height="100" fill="#E3F2FD" stroke="#4A90E2" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="70" y="95" font-size="14" font-weight="bold" fill="#1565C0">USER INPUT LAYER</text>
|
||||
|
||||
<!-- User -->
|
||||
<rect x="100" y="110" width="120" height="45" fill="#4A90E2" stroke="#1565C0" stroke-width="2" rx="4"/>
|
||||
<text x="160" y="137" font-size="12" font-weight="bold" text-anchor="middle" fill="white">User</text>
|
||||
|
||||
<!-- CLI -->
|
||||
<rect x="260" y="110" width="120" height="45" fill="#4A90E2" stroke="#1565C0" stroke-width="2" rx="4"/>
|
||||
<text x="320" y="137" font-size="12" font-weight="bold" text-anchor="middle" fill="white">CLI Entry Point</text>
|
||||
|
||||
<!-- User Config -->
|
||||
<rect x="420" y="110" width="140" height="45" fill="#4A90E2" stroke="#1565C0" stroke-width="2" rx="4"/>
|
||||
<text x="490" y="137" font-size="12" font-weight="bold" text-anchor="middle" fill="white">User Config/Env</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 2: CONFIGURATION LAYER (Verde) -->
|
||||
<g id="config-layer">
|
||||
<rect x="50" y="200" width="630" height="160" fill="#E8F5E9" stroke="#50C878" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="70" y="225" font-size="14" font-weight="bold" fill="#2E7D32">CONFIGURATION LAYER</text>
|
||||
|
||||
<!-- Nickel Schemas -->
|
||||
<rect x="100" y="245" width="150" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="175" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Nickel Schemas</text>
|
||||
<text x="175" y="280" font-size="9" text-anchor="middle" fill="white">(Validation)</text>
|
||||
|
||||
<!-- Config Validator -->
|
||||
<rect x="280" y="245" width="150" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="355" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Config Validator</text>
|
||||
<text x="355" y="280" font-size="9" text-anchor="middle" fill="white">(Nickel Engine)</text>
|
||||
|
||||
<!-- TOML Generator -->
|
||||
<rect x="460" y="245" width="150" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="535" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">TOML Generator</text>
|
||||
<text x="535" y="280" font-size="9" text-anchor="middle" fill="white">(Defaults)</text>
|
||||
|
||||
<!-- Validated Config -->
|
||||
<rect x="100" y="310" width="510" height="35" fill="#A5D6A7" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="355" y="332" font-size="11" font-weight="bold" text-anchor="middle" fill="#1B5E20">Validated Configuration</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 3: WORKSPACE RUNTIME (Naranja) -->
|
||||
<g id="workspace-layer">
|
||||
<rect x="720" y="200" width="630" height="160" fill="#FFF3E0" stroke="#FF8C42" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="740" y="225" font-size="14" font-weight="bold" fill="#E65100">WORKSPACE RUNTIME</text>
|
||||
|
||||
<!-- Workspace Manager -->
|
||||
<rect x="770" y="245" width="160" height="50" fill="#FF8C42" stroke="#E65100" stroke-width="2" rx="4"/>
|
||||
<text x="850" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Workspace Manager</text>
|
||||
<text x="850" y="280" font-size="9" text-anchor="middle" fill="white">(Selection)</text>
|
||||
|
||||
<!-- Context Loader -->
|
||||
<rect x="960" y="245" width="160" height="50" fill="#FF8C42" stroke="#E65100" stroke-width="2" rx="4"/>
|
||||
<text x="1040" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Context Loader</text>
|
||||
<text x="1040" y="280" font-size="9" text-anchor="middle" fill="white">(Environment)</text>
|
||||
|
||||
<!-- Active Workspace -->
|
||||
<rect x="1150" y="245" width="160" height="50" fill="#FF8C42" stroke="#E65100" stroke-width="2" rx="4"/>
|
||||
<text x="1230" y="265" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Active Workspace</text>
|
||||
<text x="1230" y="280" font-size="9" text-anchor="middle" fill="white">(Operations)</text>
|
||||
|
||||
<!-- Workspace Context -->
|
||||
<rect x="770" y="310" width="540" height="35" fill="#FFCC80" stroke="#E65100" stroke-width="2" rx="4"/>
|
||||
<text x="1040" y="332" font-size="11" font-weight="bold" text-anchor="middle" fill="#BF360C">Current Workspace Context</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 4: CORE SYSTEM (Verde) -->
|
||||
<g id="core-layer">
|
||||
<rect x="50" y="390" width="630" height="180" fill="#E8F5E9" stroke="#50C878" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="70" y="415" font-size="14" font-weight="bold" fill="#2E7D32">CORE SYSTEM</text>
|
||||
|
||||
<!-- CLI Components -->
|
||||
<rect x="100" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="160" y="455" font-size="11" font-weight="bold" text-anchor="middle" fill="white">CLI</text>
|
||||
<text x="160" y="468" font-size="9" text-anchor="middle" fill="white">Commands</text>
|
||||
|
||||
<!-- Libraries -->
|
||||
<rect x="240" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="300" y="455" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Libraries</text>
|
||||
<text x="300" y="468" font-size="9" text-anchor="middle" fill="white">Core Utils</text>
|
||||
|
||||
<!-- Plugins -->
|
||||
<rect x="380" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="440" y="455" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Plugins</text>
|
||||
<text x="440" y="468" font-size="9" text-anchor="middle" fill="white">Extensibility</text>
|
||||
|
||||
<!-- Scripts -->
|
||||
<rect x="520" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="580" y="455" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Scripts</text>
|
||||
<text x="580" y="468" font-size="9" text-anchor="middle" fill="white">Automation</text>
|
||||
|
||||
<!-- Batch Workflow Engine -->
|
||||
<rect x="100" y="505" width="540" height="50" fill="#66BB6A" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="370" y="525" font-size="12" font-weight="bold" text-anchor="middle" fill="white">Batch Workflow Engine</text>
|
||||
<text x="370" y="540" font-size="9" text-anchor="middle" fill="white">(Submit → Queue → Execute → Status)</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 5: PLATFORM LAYER (Verde) -->
|
||||
<g id="platform-layer">
|
||||
<rect x="720" y="390" width="630" height="180" fill="#E8F5E9" stroke="#50C878" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="740" y="415" font-size="14" font-weight="bold" fill="#2E7D32">PLATFORM LAYER</text>
|
||||
|
||||
<!-- Orchestrator -->
|
||||
<rect x="770" y="435" width="250" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="895" y="455" font-size="12" font-weight="bold" text-anchor="middle" fill="white">Orchestrator</text>
|
||||
<text x="895" y="470" font-size="9" text-anchor="middle" fill="white">(Workflow Coordination)</text>
|
||||
|
||||
<!-- Control Center -->
|
||||
<rect x="1050" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="1110" y="450" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Control</text>
|
||||
<text x="1110" y="463" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Center</text>
|
||||
|
||||
<!-- MCP Server -->
|
||||
<rect x="1190" y="435" width="120" height="50" fill="#50C878" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="1250" y="450" font-size="11" font-weight="bold" text-anchor="middle" fill="white">MCP</text>
|
||||
<text x="1250" y="463" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Server</text>
|
||||
|
||||
<!-- Installer -->
|
||||
<rect x="770" y="505" width="250" height="50" fill="#66BB6A" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="895" y="525" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Installer</text>
|
||||
<text x="895" y="540" font-size="9" text-anchor="middle" fill="white">(System Bootstrap)</text>
|
||||
|
||||
<!-- Execution Engine -->
|
||||
<rect x="1050" y="505" width="260" height="50" fill="#66BB6A" stroke="#2E7D32" stroke-width="2" rx="4"/>
|
||||
<text x="1180" y="525" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Execution Engine</text>
|
||||
<text x="1180" y="540" font-size="9" text-anchor="middle" fill="white">(Task Runner)</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 6: EXTENSIONS LAYER (Rojo) -->
|
||||
<g id="extensions-layer">
|
||||
<rect x="50" y="600" width="1300" height="150" fill="#FFEBEE" stroke="#E74C3C" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="70" y="625" font-size="14" font-weight="bold" fill="#C62828">EXTENSIONS LAYER</text>
|
||||
|
||||
<!-- Providers -->
|
||||
<rect x="100" y="645" width="130" height="50" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="165" y="665" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Providers</text>
|
||||
<text x="165" y="678" font-size="9" text-anchor="middle" fill="white">(AWS, Azure, GCP)</text>
|
||||
|
||||
<!-- Task Services -->
|
||||
<rect x="250" y="645" width="130" height="50" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="315" y="665" font-size="11" font-weight="bold" text-anchor="middle" fill="white">TaskServs</text>
|
||||
<text x="315" y="678" font-size="9" text-anchor="middle" fill="white">(HPC, Batch)</text>
|
||||
|
||||
<!-- Clusters -->
|
||||
<rect x="400" y="645" width="130" height="50" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="465" y="665" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Clusters</text>
|
||||
<text x="465" y="678" font-size="9" text-anchor="middle" fill="white">(K8s, Docker)</text>
|
||||
|
||||
<!-- AWS Provider -->
|
||||
<rect x="550" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="600" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">AWS</text>
|
||||
<text x="600" y="678" font-size="8" text-anchor="middle" fill="white">Plugin</text>
|
||||
|
||||
<!-- Azure Provider -->
|
||||
<rect x="670" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="720" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">Azure</text>
|
||||
<text x="720" y="678" font-size="8" text-anchor="middle" fill="white">Plugin</text>
|
||||
|
||||
<!-- K8s Provider -->
|
||||
<rect x="790" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="840" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">K8s</text>
|
||||
<text x="840" y="678" font-size="8" text-anchor="middle" fill="white">Plugin</text>
|
||||
|
||||
<!-- GCP Provider -->
|
||||
<rect x="910" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="960" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">GCP</text>
|
||||
<text x="960" y="678" font-size="8" text-anchor="middle" fill="white">Plugin</text>
|
||||
|
||||
<!-- OnPrem -->
|
||||
<rect x="1030" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="1080" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">OnPrem</text>
|
||||
<text x="1080" y="678" font-size="8" text-anchor="middle" fill="white">Plugin</text>
|
||||
|
||||
<!-- Custom -->
|
||||
<rect x="1150" y="645" width="100" height="50" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="1200" y="665" font-size="10" font-weight="bold" text-anchor="middle" fill="white">Custom</text>
|
||||
<text x="1200" y="678" font-size="8" text-anchor="middle" fill="white">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- CAPA 7: INFRASTRUCTURE (Rojo) -->
|
||||
<g id="infrastructure-layer">
|
||||
<rect x="50" y="780" width="1300" height="100" fill="#FFEBEE" stroke="#E74C3C" stroke-width="2" rx="8" filter="url(#shadow)"/>
|
||||
<text x="70" y="805" font-size="14" font-weight="bold" fill="#C62828">INFRASTRUCTURE DEPLOYMENT</text>
|
||||
|
||||
<!-- Cloud Services -->
|
||||
<rect x="100" y="825" width="200" height="40" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="200" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Cloud Services (AWS/Azure/GCP)</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="330" y="825" width="180" height="40" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="420" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Kubernetes Clusters</text>
|
||||
|
||||
<!-- HPC -->
|
||||
<rect x="540" y="825" width="150" height="40" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="615" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">HPC/Batch Systems</text>
|
||||
|
||||
<!-- On-Premises -->
|
||||
<rect x="720" y="825" width="150" height="40" fill="#E74C3C" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="795" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">On-Premises</text>
|
||||
|
||||
<!-- Monitoring -->
|
||||
<rect x="900" y="825" width="180" height="40" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="990" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Monitoring & Logging</text>
|
||||
|
||||
<!-- Status Feedback -->
|
||||
<rect x="1110" y="825" width="200" height="40" fill="#EF5350" stroke="#C62828" stroke-width="2" rx="4"/>
|
||||
<text x="1210" y="849" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Status & Feedback Loop</text>
|
||||
</g>
|
||||
|
||||
<!-- FLUJOS PRINCIPALES -->
|
||||
|
||||
<!-- Flujo 1: User Input → CLI → Core (Azul) -->
|
||||
<path d="M 220 133 L 260 133" stroke="#4A90E2" stroke-width="3" fill="none" marker-end="url(#arrowblue)"/>
|
||||
<path d="M 320 155 L 320 390" stroke="#4A90E2" stroke-width="3" fill="none" marker-end="url(#arrowblue)"/>
|
||||
<circle cx="235" cy="120" r="15" fill="#4A90E2" stroke="white" stroke-width="2"/>
|
||||
<text x="235" y="125" font-size="12" font-weight="bold" text-anchor="middle" fill="white">1</text>
|
||||
|
||||
<!-- Flujo 2: Config Resolution (Verde) -->
|
||||
<path d="M 490 155 L 490 200" stroke="#50C878" stroke-width="3" fill="none" marker-end="url(#arrowgreen)"/>
|
||||
<path d="M 250 270 L 280 270" stroke="#50C878" stroke-width="3" fill="none" marker-end="url(#arrowgreen)"/>
|
||||
<path d="M 430 270 L 460 270" stroke="#50C878" stroke-width="3" fill="none" marker-end="url(#arrowgreen)"/>
|
||||
<circle cx="505" cy="180" r="15" fill="#50C878" stroke="white" stroke-width="2"/>
|
||||
<text x="505" y="185" font-size="12" font-weight="bold" text-anchor="middle" fill="white">2</text>
|
||||
|
||||
<!-- Flujo 3: Batch Workflow (Verde) -->
|
||||
<path d="M 370 390 L 370 365 L 895 365 L 895 435" stroke="#50C878" stroke-width="3" fill="none" marker-end="url(#arrowgreen)"/>
|
||||
<circle cx="620" cy="365" r="15" fill="#50C878" stroke="white" stroke-width="2"/>
|
||||
<text x="620" y="370" font-size="12" font-weight="bold" text-anchor="middle" fill="white">3</text>
|
||||
|
||||
<!-- Flujo 4: Infrastructure Deployment (Rojo) -->
|
||||
<path d="M 355 345 L 355 600" stroke="#E74C3C" stroke-width="3" fill="none" marker-end="url(#arrowred)"/>
|
||||
<path d="M 465 695 L 465 780" stroke="#E74C3C" stroke-width="3" fill="none" marker-end="url(#arrowred)"/>
|
||||
<circle cx="355" cy="475" r="15" fill="#E74C3C" stroke="white" stroke-width="2"/>
|
||||
<text x="355" y="480" font-size="12" font-weight="bold" text-anchor="middle" fill="white">4</text>
|
||||
|
||||
<!-- Flujo 5: Workspace Switching (Naranja) -->
|
||||
<path d="M 850 245 L 960 245" stroke="#FF8C42" stroke-width="3" fill="none" marker-end="url(#arroworange)"/>
|
||||
<path d="M 1120 270 L 1150 270" stroke="#FF8C42" stroke-width="3" fill="none" marker-end="url(#arroworange)"/>
|
||||
<path d="M 1040 345 L 1040 390" stroke="#FF8C42" stroke-width="3" fill="none" marker-end="url(#arroworange)"/>
|
||||
<circle cx="905" cy="230" r="15" fill="#FF8C42" stroke="white" stroke-width="2"/>
|
||||
<text x="905" y="235" font-size="12" font-weight="bold" text-anchor="middle" fill="white">5</text>
|
||||
|
||||
<!-- Feedback Loop -->
|
||||
<path d="M 1210 825 L 1210 750 L 1330 750 L 1330 133 L 380 133" stroke="#E74C3C" stroke-width="2" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowred)"/>
|
||||
|
||||
<!-- Orchestrator to Extensions -->
|
||||
<path d="M 895 485 L 895 600" stroke="#50C878" stroke-width="3" fill="none" marker-end="url(#arrowgreen)"/>
|
||||
|
||||
<!-- Leyenda -->
|
||||
<g id="legend">
|
||||
<rect x="50" y="920" width="500" height="70" fill="white" stroke="#2C3E50" stroke-width="2" rx="4" filter="url(#shadow)"/>
|
||||
<text x="65" y="940" font-size="12" font-weight="bold" fill="#2C3E50">LEYENDA DE FLUJOS:</text>
|
||||
|
||||
<line x1="70" y1="955" x2="120" y2="955" stroke="#4A90E2" stroke-width="3" marker-end="url(#arrowblue)"/>
|
||||
<text x="130" y="960" font-size="10" fill="#2C3E50">User Input</text>
|
||||
|
||||
<line x1="230" y1="955" x2="280" y2="955" stroke="#50C878" stroke-width="3" marker-end="url(#arrowgreen)"/>
|
||||
<text x="290" y="960" font-size="10" fill="#2C3E50">Processing</text>
|
||||
|
||||
<line x1="70" y1="975" x2="120" y2="975" stroke="#E74C3C" stroke-width="3" marker-end="url(#arrowred)"/>
|
||||
<text x="130" y="980" font-size="10" fill="#2C3E50">Cloud/Providers</text>
|
||||
|
||||
<line x1="230" y1="975" x2="280" y2="975" stroke="#FF8C42" stroke-width="3" marker-end="url(#arroworange)"/>
|
||||
<text x="290" y="980" font-size="10" fill="#2C3E50">Workspace</text>
|
||||
|
||||
<line x1="390" y1="965" x2="440" y2="965" stroke="#E74C3C" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrowred)"/>
|
||||
<text x="450" y="970" font-size="10" fill="#2C3E50">Feedback Loop</text>
|
||||
</g>
|
||||
|
||||
<!-- Notas de Flujos -->
|
||||
<g id="flow-notes">
|
||||
<rect x="600" y="920" width="750" height="70" fill="white" stroke="#2C3E50" stroke-width="2" rx="4" filter="url(#shadow)"/>
|
||||
<text x="615" y="940" font-size="12" font-weight="bold" fill="#2C3E50">FLUJOS NUMERADOS:</text>
|
||||
<text x="615" y="957" font-size="9" fill="#2C3E50">❶ User Input → CLI → Core System</text>
|
||||
<text x="615" y="972" font-size="9" fill="#2C3E50">❷ User Config → Nickel Validation → TOML Generation</text>
|
||||
<text x="615" y="987" font-size="9" fill="#2C3E50">❸ Batch Submit → Orchestrator → Execution → Status</text>
|
||||
|
||||
<text x="975" y="957" font-size="9" fill="#2C3E50">❹ Config → Provider Extensions → Cloud/K8s</text>
|
||||
<text x="975" y="972" font-size="9" fill="#2C3E50">❺ Workspace Selection → Context → Operations</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -1,161 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 359.49 230.13">
|
||||
<defs>
|
||||
<clipPath id="d">
|
||||
<path d="M226.79,113.62c0,19.36,15.85,35.06,35.4,35.06,19.55,0,35.4-15.7,35.4-35.06,0-19.36-15.85-35.06-35.4-35.06h0c-42.68,0-35.4,15.7-35.4,35.06" style="fill:none;"/>
|
||||
</clipPath>
|
||||
|
||||
<!-- Animated gradient for connecting elements -->
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g id="c">
|
||||
<g>
|
||||
<!-- Left wheel - only outer shape rotates -->
|
||||
<g>
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 115.86 113.25;360 115.86 113.25"
|
||||
dur="8s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel - only outer shape rotates -->
|
||||
<g>
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#4cc2f1; fill-rule:evenodd; stroke:#fff; stroke-miterlimit:10;">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 261.91 113.28;-360 261.91 113.28"
|
||||
dur="6s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel center -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff;"/>
|
||||
<path d="M116.42,100.38c.2,0,.37,.16,.37,.36s-.16,.37-.37,.37c-.2,0-.37-.16-.37-.36,0,0,0,0,0,0,0-.2,.16-.36,.37-.37h0Zm1.38-4.53v-4.06h1.55c.82,.02,1.49-.63,1.51-1.43,.02-.81-.63-1.48-1.45-1.49-.02,0-.04,0-.06,0h-6.1c-.82-.02-1.49,.63-1.51,1.43-.02,.81,.63,1.48,1.45,1.49,.02,0,.04,0,.06,0h1.79v4.06m.14,18.68l6.92-9.15c.08-.11,.23-.13,.34-.05,.09,.07,.12,.19,.08,.29l-4.47,10.56c-.35,.84-1.32,1.23-2.16,.89-.07-.03-.14-.06-.2-.1-.8-.47-1.07-1.49-.6-2.28,.03-.05,.07-.11,.11-.16h0Zm-8.08-16.69l-1.86-3.97m2.09-.71l-3.98,1.86" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
|
||||
<!-- Green dot with smooth pulse -->
|
||||
<path d="M86.86,91.68c0-1.42,1.17-2.57,2.6-2.56,1.43,0,2.59,1.16,2.59,2.58,0,1.42-1.17,2.57-2.6,2.56-1.43,0-2.58-1.15-2.59-2.56v-.02Z" style="fill:#50a89c;">
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.3;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Connection elements forming infinity symbol - AGILE ANIMATION -->
|
||||
<!-- Top left part of infinity -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom left part of infinity -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Top right part of infinity -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom right part of infinity -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;3;1" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Additional elements -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#fff; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central flow representing infinity -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#fff; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;4;1" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Chronometer/clock with CSS pulse animation -->
|
||||
<g>
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224;">
|
||||
<!-- CSS-style pulse animation: scale + opacity -->
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.05;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity"
|
||||
values="1;0.75;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Chronometer display -->
|
||||
<g style="clip-path:url(#d);">
|
||||
<g>
|
||||
<path d="M329.9,88.02v57.19c0,1.92-1.57,3.47-3.51,3.47h-89.87c-1.94,0-3.51-1.55-3.51-3.47v-57.19c0-1.92,1.57-3.47,3.51-3.47h89.87c1.94,0,3.51,1.55,3.51,3.47" style="fill:#5e74b7;"/>
|
||||
<path d="M236.69,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#dba0a6;"/>
|
||||
<path d="M238.63,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#f5cc56;"/>
|
||||
<path d="M240.56,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0" style="fill:#263682;"/>
|
||||
<path d="M237.73,89.86h87.43c.92,0,1.66,.74,1.66,1.64s-.74,1.64-1.66,1.64h-87.43c-.92,0-1.66-.74-1.66-1.64s.74-1.64,1.66-1.64m-1.16,9.24h22.25v45.29h-22.25v-45.29Zm23.91,0h64.88v45.29h-64.88v-45.29Z" style="fill:#f3f4f5;"/>
|
||||
|
||||
<!-- Animated chart -->
|
||||
<path d="M265.45,108.82v13.02h53.62v-9.61s-3.47,2.93-5.61,2.93c-3.49,0-5.5-2.32-7.99-2.27-3.52,.07-4.32,2.03-7.04,2.27-3.57,.31-4.73-4.21-9.35-4.47-4.62-.27-6.46,4.96-10.78,4.65-3.26-.23-6.17-5.71-8.31-6.51-1.48-.45-3.06-.45-4.53,0" style="fill:#f2ac41;">
|
||||
<!-- Real-time data animation -->
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1,1;1.02,1.1;1,1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<path d="M239.78,102.82h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Z" style="fill:#8d9ccf;"/>
|
||||
<path d="M284.39,127.69h16.01v11.29h-16.01v-11.29Zm-18.94,0h16.01v11.29h-16.01v-11.29Zm37.61,0h16.01v11.29h-16.01v-11.29Zm-56.48-22.8h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.7h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.79h9.27v1.08h-9.27v-1.08Z" style="fill:#d1d9e0;"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green indicator with CSS pulse animation -->
|
||||
<ellipse cx="287.99" cy="132.27" rx="11.69" ry="11.58" style="fill:#05ab9e;">
|
||||
<animateTransform attributeName="transform"
|
||||
type="scale"
|
||||
values="1;1.05;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity"
|
||||
values="1;0.8;1"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Animated check mark -->
|
||||
<path d="M281.89,131.18l4.78,4.73,8.02-7.94" style="fill:none; stroke:#fff; stroke-width:4px;">
|
||||
<animate attributeName="stroke-dasharray"
|
||||
values="0 20;20 20"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,431 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
||||
<feOffset dx="0" dy="0"/>
|
||||
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#1a1f2e"/>
|
||||
<stop offset="70%" stop-color="#12151f"/>
|
||||
<stop offset="100%" stop-color="#0d1017"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#162a1e"/>
|
||||
<stop offset="100%" stop-color="#0f1a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/>
|
||||
<stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/>
|
||||
<stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#16202a"/>
|
||||
<stop offset="100%" stop-color="#0f151a"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
||||
</marker>
|
||||
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.04">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="640" y="42" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="0.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="62" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="2">TECHNICAL ARCHITECTURE</text>
|
||||
<line x1="540" y1="72" x2="740" y2="72" stroke="#1e2230" stroke-width="1"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CORE HUB -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer decorative ring (rotating) -->
|
||||
<g class="core-ring" opacity="0.15">
|
||||
<circle cx="640" cy="370" r="115" fill="none" stroke="#4a9eff" stroke-width="0.5" stroke-dasharray="3 8"/>
|
||||
</g>
|
||||
|
||||
<!-- Core circle background -->
|
||||
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
||||
<circle cx="640" cy="370" r="100" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<circle cx="640" cy="370" r="96" fill="none" stroke="#1a1f2e" stroke-width="0.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Core hex accent -->
|
||||
<g opacity="0.08">
|
||||
<polygon points="640,280 692,310 692,430 640,460 588,430 588,310" fill="none" stroke="#4a9eff" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Core labels -->
|
||||
<text x="640" y="340" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Provisioning</text>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#e8ecf4" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Core</text>
|
||||
|
||||
<!-- Core sub-items -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#6b7a90">
|
||||
<rect x="590" y="376" width="38" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="609" y="389" text-anchor="middle" fill="#7d8ba0">CLI</text>
|
||||
|
||||
<rect x="634" y="376" width="50" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="659" y="389" text-anchor="middle" fill="#7d8ba0">Libs</text>
|
||||
|
||||
<rect x="596" y="400" width="88" height="18" rx="4" fill="#141824" stroke="#1e2535" stroke-width="0.8"/>
|
||||
<text x="640" y="413" text-anchor="middle" fill="#7d8ba0">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing dots on core ring -->
|
||||
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
||||
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
||||
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
||||
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONFIGURATION LAYER (Top) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → config -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Green flow path -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="url(#config-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="none" stroke="#1c3a28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="490" y="98" width="4" height="92" rx="2" fill="#34d399" opacity="0.6"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="516" cy="121" r="11" fill="#0f1a14" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
||||
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">⚙</text>
|
||||
|
||||
<text x="534" y="125" fill="#c0d8cc" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Configuration Layer</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="506" y="140" width="110" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
||||
|
||||
<rect x="624" y="140" width="148" height="20" rx="5" fill="#0f1a14" stroke="#1c3a28" stroke-width="0.8"/>
|
||||
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
||||
|
||||
<rect x="506" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="546" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Type check</text>
|
||||
|
||||
<rect x="594" y="165" width="90" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="639" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Constraints</text>
|
||||
|
||||
<rect x="692" y="165" width="80" height="18" rx="5" fill="none" stroke="#1c3a28" stroke-width="0.6"/>
|
||||
<text x="732" y="178" text-anchor="middle" fill="#5a7a66" font-size="9">Merge</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green status label -->
|
||||
<rect x="618" y="212" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
||||
<text x="640" y="224" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- EXTENSION ECOSYSTEM (Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → extensions -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Red flow path -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="1146" y="270" width="4" height="200" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="886" cy="297" r="11" fill="#1a0f14" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">◆</text>
|
||||
|
||||
<text x="904" y="301" fill="#d8c0c8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Extension Ecosystem</text>
|
||||
|
||||
<!-- Provider plugin cards -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- AWS -->
|
||||
<rect x="878" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
||||
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
||||
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
||||
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
||||
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="878" y="386" width="246" height="42" rx="8" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.8"/>
|
||||
<text x="1001" y="406" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
||||
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
||||
|
||||
<!-- Registry badge -->
|
||||
<rect x="870" y="438" width="270" height="20" rx="5" fill="none" stroke="#2a1620" stroke-width="0.6"/>
|
||||
<text x="1001" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red endpoints dots -->
|
||||
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
||||
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
|
||||
<!-- Output label -->
|
||||
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- ORCHESTRATION ENGINE (Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → orchestration -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
|
||||
<!-- Orange flow path -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="120" y="270" width="4" height="200" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="150" cy="297" r="11" fill="#1a150f" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
||||
|
||||
<text x="168" y="301" fill="#d8ccc0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Orchestration Engine</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Batch Workflows -->
|
||||
<rect x="138" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
||||
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
||||
|
||||
<!-- Execution -->
|
||||
<rect x="268" y="318" width="120" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
||||
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
||||
|
||||
<!-- State Management -->
|
||||
<rect x="138" y="370" width="250" height="42" rx="8" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.8"/>
|
||||
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
||||
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
||||
|
||||
<!-- Pipeline status -->
|
||||
<g opacity="0.6">
|
||||
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#2a2016" stroke-width="0.6"/>
|
||||
<!-- Pipeline dots -->
|
||||
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
||||
<line x1="176" y1="433" x2="208" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
||||
<line x1="216" y1="433" x2="248" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
||||
<line x1="256" y1="433" x2="288" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
||||
<line x1="296" y1="433" x2="328" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- USER INPUT (Top-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Blue arrow: user input → CLI → Core -->
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<!-- User input node -->
|
||||
<g>
|
||||
<rect x="120" y="106" width="140" height="42" rx="10" fill="#0f1520" stroke="#1c2a3a" stroke-width="1" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="106" width="3" height="42" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<text x="147" y="124" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="9" font-weight="600" letter-spacing="0.5" opacity="0.7">USER INPUT</text>
|
||||
<text x="147" y="140" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
||||
</g>
|
||||
|
||||
<!-- Blue flow label -->
|
||||
<rect x="356" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
||||
<text x="388" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- WORKSPACE RUNTIME (Bottom) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → workspace -->
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#1e2535" stroke-width="1.5"/>
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="url(#ws-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="none" stroke="#1c283a" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar bottom -->
|
||||
<rect x="370" y="636" width="540" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="396" cy="577" r="11" fill="#0f151a" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="396" y="581" text-anchor="middle" fill="#4a9eff" font-size="11">⬡</text>
|
||||
|
||||
<text x="414" y="581" fill="#c0c8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Workspace Runtime</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="388" y="598" width="134" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="455" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
||||
|
||||
<rect x="530" y="598" width="172" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="616" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Environment</text>
|
||||
|
||||
<rect x="710" y="598" width="178" height="24" rx="6" fill="#0f151a" stroke="#1c283a" stroke-width="0.8"/>
|
||||
<text x="799" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Vertical connectors from workspace to targets -->
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#1e2535" stroke-width="1"/>
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<!-- Target nodes -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Production -->
|
||||
<rect x="178" y="720" width="160" height="54" rx="10" fill="#120f0f" stroke="#3a1c1c" stroke-width="1"/>
|
||||
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="214" y="744" fill="#d0a0a0" font-size="11" font-weight="500">Production</text>
|
||||
<text x="200" y="762" fill="#5a3838" font-size="9">us-east-1 · 3 replicas</text>
|
||||
|
||||
<!-- Staging -->
|
||||
<rect x="408" y="720" width="160" height="54" rx="10" fill="#12100f" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="444" y="744" fill="#d0c0a0" font-size="11" font-weight="500">Staging</text>
|
||||
<text x="430" y="762" fill="#5a5038" font-size="9">eu-west-1 · 1 replica</text>
|
||||
|
||||
<!-- Dev / K8s -->
|
||||
<rect x="638" y="720" width="160" height="54" rx="10" fill="#0f1210" stroke="#1c3a28" stroke-width="1"/>
|
||||
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="674" y="744" fill="#a0d0b8" font-size="11" font-weight="500">Dev Cluster</text>
|
||||
<text x="660" y="762" fill="#385a48" font-size="9">k8s · minikube</text>
|
||||
|
||||
<!-- Edge / Custom -->
|
||||
<rect x="868" y="720" width="160" height="54" rx="10" fill="#0f1015" stroke="#1c1c3a" stroke-width="1"/>
|
||||
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="904" y="744" fill="#b0b0d8" font-size="11" font-weight="500">Edge / Custom</text>
|
||||
<text x="890" y="762" fill="#48486a" font-size="9">IoT · on-prem</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(44, 720)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
||||
|
||||
<line x1="0" y1="14" x2="24" y2="14" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="18" fill="#4a6a8a">User input</text>
|
||||
|
||||
<line x1="0" y1="30" x2="24" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="34" fill="#4a7a5a">Config validation</text>
|
||||
|
||||
<line x1="0" y1="46" x2="24" y2="46" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="50" fill="#7a6a3a">Task orchestration</text>
|
||||
|
||||
<line x1="0" y1="62" x2="24" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="66" fill="#7a3a3a">Cloud output</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CROSS-CONNECTIONS (subtle) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Config → Orchestration (dotted) -->
|
||||
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
||||
|
||||
<!-- Orchestration → Extensions (through core) -->
|
||||
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- Config → Extensions (through core) -->
|
||||
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#1e2535" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VERSION BADGE -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<text x="1236" y="880" text-anchor="end" fill="#2a2e38" font-family="'IBM Plex Mono', monospace" font-size="8" letter-spacing="0.5">v2.4.0 · Architecture</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,431 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.1"/>
|
||||
</filter>
|
||||
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
||||
<feOffset dx="0" dy="0"/>
|
||||
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#f0f4f9"/>
|
||||
<stop offset="70%" stop-color="#e8ecf1"/>
|
||||
<stop offset="100%" stop-color="#dfe5ed"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#f5f7fa"/>
|
||||
<stop offset="100%" stop-color="#ffffff"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e8f5f0"/>
|
||||
<stop offset="100%" stop-color="#d4ebe3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#fce8f0"/>
|
||||
<stop offset="100%" stop-color="#f5d9e8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#fef5e8"/>
|
||||
<stop offset="100%" stop-color="#fcead0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#e8f2f9"/>
|
||||
<stop offset="100%" stop-color="#d4e7f0"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
||||
</marker>
|
||||
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.04">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="640" y="42" text-anchor="middle" fill="#4cc2f1" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="0.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="62" text-anchor="middle" fill="#666666" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="2">TECHNICAL ARCHITECTURE</text>
|
||||
<line x1="540" y1="72" x2="740" y2="72" stroke="#999999" stroke-width="1"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CORE HUB -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer decorative ring (rotating) -->
|
||||
<g class="core-ring" opacity="0.15">
|
||||
<circle cx="640" cy="370" r="115" fill="none" stroke="#4a9eff" stroke-width="0.5" stroke-dasharray="3 8"/>
|
||||
</g>
|
||||
|
||||
<!-- Core circle background -->
|
||||
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
||||
<circle cx="640" cy="370" r="100" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
<circle cx="640" cy="370" r="96" fill="none" stroke="#dddddd" stroke-width="0.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Core hex accent -->
|
||||
<g opacity="0.08">
|
||||
<polygon points="640,280 692,310 692,430 640,460 588,430 588,310" fill="none" stroke="#4a9eff" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Core labels -->
|
||||
<text x="640" y="340" text-anchor="middle" fill="#4cc2f1" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Provisioning</text>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#4cc2f1" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.3">Core</text>
|
||||
|
||||
<!-- Core sub-items -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#555555">
|
||||
<rect x="590" y="376" width="38" height="18" rx="4" fill="#f5f7fa" stroke="#cccccc" stroke-width="0.8"/>
|
||||
<text x="609" y="389" text-anchor="middle" fill="#555555">CLI</text>
|
||||
|
||||
<rect x="634" y="376" width="50" height="18" rx="4" fill="#f5f7fa" stroke="#cccccc" stroke-width="0.8"/>
|
||||
<text x="659" y="389" text-anchor="middle" fill="#555555">Libs</text>
|
||||
|
||||
<rect x="596" y="400" width="88" height="18" rx="4" fill="#f5f7fa" stroke="#cccccc" stroke-width="0.8"/>
|
||||
<text x="640" y="413" text-anchor="middle" fill="#555555">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing dots on core ring -->
|
||||
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
||||
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
||||
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
||||
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONFIGURATION LAYER (Top) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → config -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
|
||||
<!-- Green flow path -->
|
||||
<path d="M 640 270 L 640 190" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="url(#config-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="490" y="98" width="300" height="92" rx="12" fill="none" stroke="#b8d9cc" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="490" y="98" width="4" height="92" rx="2" fill="#34d399" opacity="0.6"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="516" cy="121" r="11" fill="#f0f4f2" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
||||
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">⚙</text>
|
||||
|
||||
<text x="534" y="125" fill="#34d399" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Configuration Layer</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="506" y="140" width="110" height="20" rx="5" fill="#f0f4f2" stroke="#b8d9cc" stroke-width="0.8"/>
|
||||
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
||||
|
||||
<rect x="624" y="140" width="148" height="20" rx="5" fill="#f0f4f2" stroke="#b8d9cc" stroke-width="0.8"/>
|
||||
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
||||
|
||||
<rect x="506" y="165" width="80" height="18" rx="5" fill="none" stroke="#b8d9cc" stroke-width="0.6"/>
|
||||
<text x="546" y="178" text-anchor="middle" fill="#666666" font-size="9">Type check</text>
|
||||
|
||||
<rect x="594" y="165" width="90" height="18" rx="5" fill="none" stroke="#b8d9cc" stroke-width="0.6"/>
|
||||
<text x="639" y="178" text-anchor="middle" fill="#666666" font-size="9">Constraints</text>
|
||||
|
||||
<rect x="692" y="165" width="80" height="18" rx="5" fill="none" stroke="#b8d9cc" stroke-width="0.6"/>
|
||||
<text x="732" y="178" text-anchor="middle" fill="#666666" font-size="9">Merge</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green status label -->
|
||||
<rect x="618" y="212" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
||||
<text x="640" y="224" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- EXTENSION ECOSYSTEM (Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → extensions -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
|
||||
<!-- Red flow path -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#d9b8cc" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="1146" y="270" width="4" height="200" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="886" cy="297" r="11" fill="#f5f0f2" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">◆</text>
|
||||
|
||||
<text x="904" y="301" fill="#ef4444" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Extension Ecosystem</text>
|
||||
|
||||
<!-- Provider plugin cards -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- AWS -->
|
||||
<rect x="878" y="318" width="118" height="58" rx="8" fill="#f5f0f2" stroke="#d9b8cc" stroke-width="0.8"/>
|
||||
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
||||
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
||||
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#f5f0f2" stroke="#d9b8cc" stroke-width="0.8"/>
|
||||
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
||||
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
||||
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="878" y="386" width="246" height="42" rx="8" fill="#f5f0f2" stroke="#d9b8cc" stroke-width="0.8"/>
|
||||
<text x="1001" y="406" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
||||
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
||||
|
||||
<!-- Registry badge -->
|
||||
<rect x="870" y="438" width="270" height="20" rx="5" fill="none" stroke="#d9b8cc" stroke-width="0.6"/>
|
||||
<text x="1001" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red endpoints dots -->
|
||||
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
||||
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
|
||||
<!-- Output label -->
|
||||
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- ORCHESTRATION ENGINE (Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → orchestration -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
|
||||
<!-- Orange flow path -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#d9ccb8" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="120" y="270" width="4" height="200" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="150" cy="297" r="11" fill="#f5f2f0" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
||||
|
||||
<text x="168" y="301" fill="#ff8c42" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Orchestration Engine</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Batch Workflows -->
|
||||
<rect x="138" y="318" width="120" height="42" rx="8" fill="#f5f2f0" stroke="#d9ccb8" stroke-width="0.8"/>
|
||||
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
||||
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
||||
|
||||
<!-- Execution -->
|
||||
<rect x="268" y="318" width="120" height="42" rx="8" fill="#f5f2f0" stroke="#d9ccb8" stroke-width="0.8"/>
|
||||
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
||||
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
||||
|
||||
<!-- State Management -->
|
||||
<rect x="138" y="370" width="250" height="42" rx="8" fill="#f5f2f0" stroke="#d9ccb8" stroke-width="0.8"/>
|
||||
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
||||
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
||||
|
||||
<!-- Pipeline status -->
|
||||
<g opacity="0.6">
|
||||
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#2a2016" stroke-width="0.6"/>
|
||||
<!-- Pipeline dots -->
|
||||
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
||||
<line x1="176" y1="433" x2="208" y2="433" stroke="#d9ccb8" stroke-width="1"/>
|
||||
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
||||
<line x1="216" y1="433" x2="248" y2="433" stroke="#d9ccb8" stroke-width="1"/>
|
||||
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
||||
<line x1="256" y1="433" x2="288" y2="433" stroke="#d9ccb8" stroke-width="1"/>
|
||||
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
||||
<line x1="296" y1="433" x2="328" y2="433" stroke="#d9ccb8" stroke-width="1"/>
|
||||
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- USER INPUT (Top-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Blue arrow: user input → CLI → Core -->
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<!-- User input node -->
|
||||
<g>
|
||||
<rect x="120" y="106" width="140" height="42" rx="10" fill="#f0f4f8" stroke="#b8ccdd" stroke-width="1" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="106" width="3" height="42" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<text x="147" y="124" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="9" font-weight="600" letter-spacing="0.5" opacity="0.7">USER INPUT</text>
|
||||
<text x="147" y="140" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
||||
</g>
|
||||
|
||||
<!-- Blue flow label -->
|
||||
<rect x="356" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
||||
<text x="388" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- WORKSPACE RUNTIME (Bottom) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → workspace -->
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#cccccc" stroke-width="1.5"/>
|
||||
<path d="M 640 470 L 640 540" fill="none" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="url(#ws-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="370" y="550" width="540" height="90" rx="12" fill="none" stroke="#b8ccdd" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bar bottom -->
|
||||
<rect x="370" y="636" width="540" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="396" cy="577" r="11" fill="#f0f4f8" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="396" y="581" text-anchor="middle" fill="#4a9eff" font-size="11">⬡</text>
|
||||
|
||||
<text x="414" y="581" fill="#4cc2f1" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14">Workspace Runtime</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="388" y="598" width="134" height="24" rx="6" fill="#f0f4f8" stroke="#b8ccdd" stroke-width="0.8"/>
|
||||
<text x="455" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
||||
|
||||
<rect x="530" y="598" width="172" height="24" rx="6" fill="#f0f4f8" stroke="#b8ccdd" stroke-width="0.8"/>
|
||||
<text x="616" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Environment</text>
|
||||
|
||||
<rect x="710" y="598" width="178" height="24" rx="6" fill="#f0f4f8" stroke="#b8ccdd" stroke-width="0.8"/>
|
||||
<text x="799" y="614" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Vertical connectors from workspace to targets -->
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#cccccc" stroke-width="1"/>
|
||||
<line x1="420" y1="640" x2="260" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#cccccc" stroke-width="1"/>
|
||||
<line x1="570" y1="640" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#cccccc" stroke-width="1"/>
|
||||
<line x1="700" y1="640" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#cccccc" stroke-width="1"/>
|
||||
<line x1="830" y1="640" x2="950" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<!-- Target nodes -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Production -->
|
||||
<rect x="178" y="720" width="160" height="54" rx="10" fill="#f0f0f0" stroke="#d9b8b8" stroke-width="1"/>
|
||||
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="214" y="744" fill="#d0a0a0" font-size="11" font-weight="500">Production</text>
|
||||
<text x="200" y="762" fill="#5a3838" font-size="9">us-east-1 · 3 replicas</text>
|
||||
|
||||
<!-- Staging -->
|
||||
<rect x="408" y="720" width="160" height="54" rx="10" fill="#f0f0f0" stroke="#d9ccb8" stroke-width="1"/>
|
||||
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="444" y="744" fill="#d0c0a0" font-size="11" font-weight="500">Staging</text>
|
||||
<text x="430" y="762" fill="#5a5038" font-size="9">eu-west-1 · 1 replica</text>
|
||||
|
||||
<!-- Dev / K8s -->
|
||||
<rect x="638" y="720" width="160" height="54" rx="10" fill="#f0f0f0" stroke="#b8d9cc" stroke-width="1"/>
|
||||
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="674" y="744" fill="#a0d0b8" font-size="11" font-weight="500">Dev Cluster</text>
|
||||
<text x="660" y="762" fill="#385a48" font-size="9">k8s · minikube</text>
|
||||
|
||||
<!-- Edge / Custom -->
|
||||
<rect x="868" y="720" width="160" height="54" rx="10" fill="#f0f0f0" stroke="#b8ccdd" stroke-width="1"/>
|
||||
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="904" y="744" fill="#b0b0d8" font-size="11" font-weight="500">Edge / Custom</text>
|
||||
<text x="890" y="762" fill="#48486a" font-size="9">IoT · on-prem</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(44, 720)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
||||
|
||||
<line x1="0" y1="14" x2="24" y2="14" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="18" fill="#4a6a8a">User input</text>
|
||||
|
||||
<line x1="0" y1="30" x2="24" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="34" fill="#4a7a5a">Config validation</text>
|
||||
|
||||
<line x1="0" y1="46" x2="24" y2="46" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="50" fill="#7a6a3a">Task orchestration</text>
|
||||
|
||||
<line x1="0" y1="62" x2="24" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="30" y="66" fill="#7a3a3a">Cloud output</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CROSS-CONNECTIONS (subtle) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Config → Orchestration (dotted) -->
|
||||
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#cccccc" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
||||
|
||||
<!-- Orchestration → Extensions (through core) -->
|
||||
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#cccccc" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- Config → Extensions (through core) -->
|
||||
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#cccccc" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VERSION BADGE -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<text x="1236" y="880" text-anchor="end" fill="#2a2e38" font-family="'IBM Plex Mono', monospace" font-size="8" letter-spacing="0.5">v2.4.0 · Architecture</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,476 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.orbit-flow { animation: orbit-dash 4s linear infinite; }
|
||||
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
|
||||
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
|
||||
.spoke { animation: spoke-dash 2s linear infinite; }
|
||||
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
|
||||
.https-beam { animation: https-p 4s ease-in-out infinite; }
|
||||
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
|
||||
.https-label { animation: https-lbl 4s ease-in-out infinite; }
|
||||
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
|
||||
|
||||
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
|
||||
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
|
||||
|
||||
.cred-dot { opacity: 0; }
|
||||
.db-flow { animation: db-dash 2.5s linear infinite; }
|
||||
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/><stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/><stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/><stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/><stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/><stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/><stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/><stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
|
||||
<path id="orbit-cw" d="M 640,185 A 135,135 0 1,1 640,455 A 135,135 0 1,1 640,185 Z" fill="none"/>
|
||||
<path id="orbit-ccw" d="M 640,185 A 135,135 0 1,0 640,455 A 135,135 0 1,0 640,185 Z" fill="none"/>
|
||||
|
||||
<path id="path-orch-vault" d="M 640,185 A 135,135 0 0,0 508,276" fill="none"/>
|
||||
<path id="path-vault-orch" d="M 508,276 A 135,135 0 0,1 640,185" fill="none"/>
|
||||
<path id="path-cli-orch" d="M 640,98 L 640,115" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Star field -->
|
||||
<g opacity="0.35">
|
||||
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
|
||||
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
|
||||
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
|
||||
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<text x="640" y="28" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="17" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="48" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="56" x2="770" y2="56" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
<!-- ═══ CLI ═══ -->
|
||||
<g>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="535" y="67" width="3" height="28" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
<circle cx="556" cy="78" r="7" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="556" y="81" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
|
||||
<text x="570" y="78" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
|
||||
<text x="548" y="92" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning create server</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- NATS ORBITAL RING SYSTEM -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Ring outer glow -->
|
||||
<circle cx="640" cy="320" r="138" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
|
||||
|
||||
<!-- Main orbit ring (flowing dashes) -->
|
||||
<circle cx="640" cy="320" r="135" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
|
||||
|
||||
<!-- Inner engine ring (counter-rotating) -->
|
||||
<circle cx="640" cy="320" r="80" fill="none" stroke="#5a6278" stroke-width="1" stroke-dasharray="6 6" opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360 640 320" to="0 640 320" dur="15s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Smallest inner ring (clockwise) -->
|
||||
<circle cx="640" cy="320" r="45" fill="none" stroke="#3a4050" stroke-width="0.8" stroke-dasharray="4 4" opacity="0.2">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 640 320" to="360 640 320" dur="25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Hub center glow -->
|
||||
<circle cx="640" cy="320" r="40" fill="url(#hub-glow)" class="hub-pulse"/>
|
||||
|
||||
<!-- Hub core dot -->
|
||||
<circle cx="640" cy="320" r="5" fill="#94a3b8" opacity="0.5" class="hub-pulse"/>
|
||||
|
||||
<!-- Hub labels -->
|
||||
<text x="640" y="305" text-anchor="middle" fill="#c8d0dc" font-family="'DM Sans',sans-serif" font-weight="700" font-size="14" letter-spacing="1.5">NATS</text>
|
||||
<text x="640" y="322" text-anchor="middle" fill="#8090a0" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="2">JETSTREAM</text>
|
||||
<text x="640" y="336" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="8">:4222</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SATELLITE SERVICES -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
|
||||
<g>
|
||||
<rect x="505" y="95" width="270" height="110" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="515" y="108" width="3" height="84" rx="1.5" fill="#f59e0b" opacity="0.5"/>
|
||||
<circle cx="537" cy="127" r="8" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="537" y="131" text-anchor="middle" fill="#f59e0b" font-size="9">▶</text>
|
||||
<text x="553" y="130" fill="#d8ccc0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Orchestrator</text>
|
||||
<text x="740" y="130" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
|
||||
<circle cx="752" cy="127" r="3.5" fill="#f59e0b" class="health"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#6b6050">
|
||||
<rect x="528" y="143" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="153" text-anchor="middle" opacity="0.9">Task State Machine • Provider API • SSH</text>
|
||||
<rect x="528" y="162" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="172" text-anchor="middle" opacity="0.85">Webhooks • Rollback • Audit Collector</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
|
||||
<g>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="996" y="203" width="3" height="104" rx="1.5" fill="#818cf8" opacity="0.5"/>
|
||||
<circle cx="772" cy="222" r="8" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="772" y="226" text-anchor="middle" fill="#818cf8" font-size="9">◯</text>
|
||||
<text x="788" y="225" fill="#c0c0d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Control Center</text>
|
||||
<text x="980" y="225" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
|
||||
<circle cx="992" cy="222" r="3.5" fill="#818cf8" class="health health-d1"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a5878">
|
||||
<rect x="763" y="238" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="248" text-anchor="middle" opacity="0.9">Cedar Policies • JWT • Sessions</text>
|
||||
<rect x="763" y="257" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="267" text-anchor="middle" opacity="0.85">WebSocket • RBAC • Solo: auto-session</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP (144°, lower-right) ─── -->
|
||||
<g>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="971" y="413" width="3" height="104" rx="1.5" fill="#22d3ee" opacity="0.5"/>
|
||||
<circle cx="747" cy="432" r="8" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="747" y="436" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
|
||||
<text x="763" y="435" fill="#c0d8d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">AI • MCP</text>
|
||||
<text x="960" y="435" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
|
||||
<circle cx="972" cy="432" r="3.5" fill="#22d3ee" class="health health-d2"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#385a58">
|
||||
<rect x="738" y="448" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="458" text-anchor="middle" opacity="0.9">RAG Engine • MCP Server • Tools</text>
|
||||
<rect x="738" y="467" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="477" text-anchor="middle" opacity="0.85">Embeddings • Model Routing • KGraph</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (216°, lower-left) ─── -->
|
||||
<g>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="305" y="413" width="3" height="104" rx="1.5" fill="#ef4444" opacity="0.5"/>
|
||||
<circle cx="327" cy="432" r="8" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="327" y="436" text-anchor="middle" fill="#ef4444" font-size="9">⚙</text>
|
||||
<text x="343" y="435" fill="#d8c0c8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">Ext Registry</text>
|
||||
<text x="530" y="435" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
|
||||
<circle cx="542" cy="432" r="3.5" fill="#ef4444" class="health health-d3"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3848">
|
||||
<rect x="318" y="448" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="458" text-anchor="middle" opacity="0.9">Gitea • Forgejo • OCI • LRU</text>
|
||||
<rect x="318" y="467" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="477" text-anchor="middle" opacity="0.85">Providers • Taskservs • vault:// creds</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
|
||||
<g>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="280" y="203" width="3" height="104" rx="1.5" fill="#ec4899" opacity="0.5"/>
|
||||
<circle cx="302" cy="222" r="8" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="302" y="226" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
|
||||
<text x="318" y="225" fill="#d8c0d0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Vault Service</text>
|
||||
<text x="510" y="225" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
|
||||
<circle cx="522" cy="222" r="3.5" fill="#ec4899" class="health health-d4"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3850">
|
||||
<rect x="293" y="238" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="248" text-anchor="middle" opacity="0.9">Lease Lifecycle • Key Management</text>
|
||||
<rect x="293" y="257" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="267" text-anchor="middle" opacity="0.85">SOPS • Age • Secrets never in NATS</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL BEAM ═══ -->
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="2" class="https-beam" filter="url(#glow-gold)"/>
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="495" y="200" fill="#fbbf24" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label" transform="rotate(-65,495,200)">HTTPS</text>
|
||||
|
||||
|
||||
<!-- ═══ ORBITAL PARTICLES ═══ -->
|
||||
|
||||
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
|
||||
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
|
||||
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CREDENTIAL FLOW ═══ -->
|
||||
|
||||
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
|
||||
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-orch-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#path-vault-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
|
||||
<g opacity="0.3">
|
||||
<line x1="640" y1="455" x2="640" y2="520" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="520" y1="430" x2="380" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="760" y1="430" x2="900" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SURREALDB ═══ -->
|
||||
|
||||
<g>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="url(#surreal-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="none" stroke="#2e2450" stroke-width="1"/>
|
||||
<rect x="120" y="568" width="1040" height="4" rx="2" fill="#a78bfa" opacity="0.2"/>
|
||||
|
||||
<text x="640" y="537" text-anchor="middle" fill="#c4b5e0" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">SURREALDB PERSISTENCE</text>
|
||||
<text x="1120" y="537" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.4">Solo: RocksDB • Multi: WebSocket</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="148" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="213" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">orchestrator</text>
|
||||
|
||||
<rect x="290" y="545" width="110" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="345" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">vault</text>
|
||||
|
||||
<rect x="412" y="545" width="140" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="482" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">control_center</text>
|
||||
|
||||
<rect x="564" y="545" width="90" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="609" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">audit</text>
|
||||
|
||||
<rect x="666" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="731" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">workspace</text>
|
||||
|
||||
<rect x="808" y="545" width="100" height="16" rx="3" fill="none" stroke="#2e2450" stroke-width="0.4"/>
|
||||
<text x="858" y="556" text-anchor="middle" fill="#5a4878" opacity="0.6">Nickel config</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SOLID ENFORCEMENT ═══ -->
|
||||
|
||||
<g transform="translate(120, 585)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="0" y="8" width="80" height="12" rx="3" fill="#f59e0b" opacity="0.06" stroke="#f59e0b" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="40" y="17" text-anchor="middle" fill="#f59e0b" opacity="0.6">Compile-time</text>
|
||||
<rect x="88" y="8" width="68" height="12" rx="3" fill="#818cf8" opacity="0.06" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="122" y="17" text-anchor="middle" fill="#818cf8" opacity="0.6">Dev-time</text>
|
||||
<rect x="164" y="8" width="74" height="12" rx="3" fill="#ec4899" opacity="0.06" stroke="#ec4899" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="201" y="17" text-anchor="middle" fill="#ec4899" opacity="0.6">Pre-commit</text>
|
||||
<rect x="246" y="8" width="50" height="12" rx="3" fill="#ef4444" opacity="0.06" stroke="#ef4444" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="271" y="17" text-anchor="middle" fill="#ef4444" opacity="0.6">CI/CD</text>
|
||||
<rect x="304" y="8" width="60" height="12" rx="3" fill="#22d3ee" opacity="0.06" stroke="#22d3ee" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="334" y="17" text-anchor="middle" fill="#22d3ee" opacity="0.6">Runtime</text>
|
||||
<rect x="372" y="8" width="50" height="12" rx="3" fill="#94a3b8" opacity="0.06" stroke="#94a3b8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="397" y="17" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#3a3e48" opacity="0.5">
|
||||
<text x="480" y="12">Provider APIs: Orchestrator only | SSH: Orchestrator + Machines</text>
|
||||
<text x="480" y="24">Auth: Control Center only | Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ LEGEND ═══ -->
|
||||
|
||||
<g transform="translate(120, 625)" font-family="'IBM Plex Mono',monospace" font-size="8">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">SERVICES</text>
|
||||
<circle cx="7" cy="12" r="3" fill="#f59e0b"/><text x="15" y="16" fill="#6b6050">Orchestrator</text>
|
||||
<circle cx="7" cy="24" r="3" fill="#818cf8"/><text x="15" y="28" fill="#5a5878">Control Center</text>
|
||||
<circle cx="7" cy="36" r="3" fill="#ec4899"/><text x="15" y="40" fill="#5a3850">Vault Service</text>
|
||||
<circle cx="7" cy="48" r="3" fill="#ef4444"/><text x="15" y="52" fill="#5a3848">Extension Registry</text>
|
||||
<circle cx="7" cy="60" r="3" fill="#22d3ee"/><text x="15" y="64" fill="#385a58">AI • MCP</text>
|
||||
|
||||
<text x="340" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
<circle cx="348" cy="12" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<text x="360" y="16" fill="#5a6278">NATS Orbital Ring (:4222)</text>
|
||||
<line x1="340" y1="24" x2="354" y2="24" stroke="#a78bfa" stroke-width="1.5"/>
|
||||
<text x="360" y="28" fill="#5a4878">SurrealDB Persistence</text>
|
||||
<line x1="340" y1="36" x2="354" y2="36" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="360" y="40" fill="#6b6050">HTTPS Credentials</text>
|
||||
|
||||
<text x="700" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
<rect x="700" y="6" width="40" height="10" rx="2" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4"/>
|
||||
<text x="720" y="14" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="750" y="14" fill="#4a7a5a" font-size="7">RocksDB + local NATS + auto-session</text>
|
||||
<rect x="700" y="20" width="40" height="10" rx="2" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4"/>
|
||||
<text x="720" y="28" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="750" y="28" fill="#5a5878" font-size="7">WebSocket DB + NATS cluster + JWT+Cedar</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DEPLOYMENT ═══ -->
|
||||
|
||||
<g transform="translate(0, 750)" font-family="'IBM Plex Mono',monospace">
|
||||
<rect x="160" y="0" width="120" height="30" rx="6" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="174" cy="11" r="3" fill="#ef4444"/><text x="182" y="14" fill="#d0a0a0" font-size="8" font-weight="500">Production</text>
|
||||
<text x="174" y="26" fill="#5a3838" font-size="7" text-anchor="middle">Hetzner • AWS</text>
|
||||
|
||||
<rect x="300" y="0" width="120" height="30" rx="6" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="314" cy="11" r="3" fill="#f59e0b"/><text x="322" y="14" fill="#d0c0a0" font-size="8" font-weight="500">Staging</text>
|
||||
<text x="314" y="26" fill="#5a5038" font-size="7" text-anchor="middle">K8s cluster</text>
|
||||
|
||||
<rect x="440" y="0" width="120" height="30" rx="6" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="454" cy="11" r="3" fill="#34d399"/><text x="462" y="14" fill="#a0d0b8" font-size="8" font-weight="500">Dev</text>
|
||||
<text x="454" y="26" fill="#385a48" font-size="7" text-anchor="middle">Solo mode</text>
|
||||
|
||||
<rect x="580" y="0" width="120" height="30" rx="6" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="594" cy="11" r="3" fill="#818cf8"/><text x="602" y="14" fill="#b0b0d8" font-size="8" font-weight="500">Edge</text>
|
||||
<text x="594" y="26" fill="#48486a" font-size="7" text-anchor="middle">On-prem • IoT</text>
|
||||
|
||||
<rect x="720" y="0" width="120" height="30" rx="6" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="734" cy="11" r="3" fill="#22d3ee"/><text x="742" y="14" fill="#a0c8c8" font-size="8" font-weight="500">Custom</text>
|
||||
<text x="734" y="26" fill="#385858" font-size="7" text-anchor="middle">GitOps • Webhook</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ VERSION ═══ -->
|
||||
<text x="1180" y="880" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v4.0 • Orbital Control Plane</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 30 KiB |
|
|
@ -1,499 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.orbit-flow { animation: orbit-dash 4s linear infinite; }
|
||||
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
|
||||
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
|
||||
.spoke { animation: spoke-dash 2s linear infinite; }
|
||||
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
|
||||
.https-beam { animation: https-p 4s ease-in-out infinite; }
|
||||
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
|
||||
.https-label { animation: https-lbl 4s ease-in-out infinite; }
|
||||
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
|
||||
|
||||
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
|
||||
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
|
||||
|
||||
.cred-dot { opacity: 0; }
|
||||
.db-flow { animation: db-dash 2.5s linear infinite; }
|
||||
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/><stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/><stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/><stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/><stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/><stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/><stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/><stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
|
||||
<!-- Orbital paths for animateMotion -->
|
||||
<path id="orbit-cw" d="M 640,192 A 180,180 0 1,1 640,552 A 180,180 0 1,1 640,192 Z" fill="none"/>
|
||||
<path id="orbit-ccw" d="M 640,192 A 180,180 0 1,0 640,552 A 180,180 0 1,0 640,192 Z" fill="none"/>
|
||||
|
||||
<!-- Credential flow: Orch(top) ↔ Vault(upper-left) short arcs -->
|
||||
<path id="path-orch-vault" d="M 640,192 A 180,180 0 0,0 469,316" fill="none"/>
|
||||
<path id="path-vault-orch" d="M 469,316 A 180,180 0 0,1 640,192" fill="none"/>
|
||||
<path id="path-cli-orch" d="M 640,98 L 640,117" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Star field -->
|
||||
<g opacity="0.35">
|
||||
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
|
||||
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
|
||||
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
|
||||
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
|
||||
<circle cx="1210" cy="375" r="0.5" fill="#fff"/><circle cx="285" cy="760" r="0.7" fill="#fff"/>
|
||||
<circle cx="750" cy="42" r="0.6" fill="#fff"/><circle cx="440" cy="840" r="0.8" fill="#fff"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<text x="640" y="28" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="17" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="48" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="56" x2="770" y2="56" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
<!-- ═══ CLI ═══ -->
|
||||
<g>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="535" y="67" width="3" height="28" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
<circle cx="556" cy="78" r="7" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="556" y="81" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
|
||||
<text x="570" y="78" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
|
||||
<text x="548" y="92" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning create server</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- NATS ORBITAL RING SYSTEM -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Ring outer glow -->
|
||||
<circle cx="640" cy="372" r="183" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
|
||||
|
||||
<!-- Main orbit ring (visible, flowing dashes) -->
|
||||
<circle cx="640" cy="372" r="180" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
|
||||
|
||||
<!-- Inner engine ring (counter-rotating via SMIL) -->
|
||||
<circle cx="640" cy="372" r="110" fill="none" stroke="#5a6278" stroke-width="1" stroke-dasharray="6 6" opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360 640 372" to="0 640 372" dur="15s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Second inner ring (even smaller, clockwise) -->
|
||||
<circle cx="640" cy="372" r="70" fill="none" stroke="#3a4050" stroke-width="0.8" stroke-dasharray="4 4" opacity="0.2">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 640 372" to="360 640 372" dur="25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Hub center glow -->
|
||||
<circle cx="640" cy="372" r="50" fill="url(#hub-glow)" class="hub-pulse"/>
|
||||
|
||||
<!-- Hub core dot -->
|
||||
<circle cx="640" cy="372" r="5" fill="#94a3b8" opacity="0.5" class="hub-pulse"/>
|
||||
|
||||
<!-- Hub labels -->
|
||||
<text x="640" y="358" text-anchor="middle" fill="#c8d0dc" font-family="'DM Sans',sans-serif" font-weight="700" font-size="14" letter-spacing="1.5">NATS</text>
|
||||
<text x="640" y="374" text-anchor="middle" fill="#8090a0" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="2">JETSTREAM</text>
|
||||
<text x="640" y="388" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="8">:4222</text>
|
||||
|
||||
<!-- Subject labels inside hub -->
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#4a5268" opacity="0.7">
|
||||
<text x="600" y="410" text-anchor="middle">tasks.></text>
|
||||
<text x="680" y="410" text-anchor="middle">vault.></text>
|
||||
<text x="600" y="423" text-anchor="middle">auth.></text>
|
||||
<text x="680" y="423" text-anchor="middle">audit.></text>
|
||||
<text x="600" y="436" text-anchor="middle">workspace.></text>
|
||||
<text x="680" y="436" text-anchor="middle">health.></text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SATELLITE SERVICES -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
|
||||
<g>
|
||||
<rect x="527" y="107" width="226" height="84" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
<rect x="535" y="115" width="210" height="68" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="535" y="115" width="210" height="68" rx="10" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="535" y="118" width="3" height="62" rx="1.5" fill="#f59e0b" opacity="0.5"/>
|
||||
<circle cx="556" cy="137" r="8" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="556" y="141" text-anchor="middle" fill="#f59e0b" font-size="9">▶</text>
|
||||
<text x="570" y="140" fill="#d8ccc0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Orchestrator</text>
|
||||
<text x="720" y="140" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
|
||||
<circle cx="732" cy="137" r="3.5" fill="#f59e0b" class="health"/>
|
||||
<text x="548" y="158" fill="#8a7a60" font-family="'IBM Plex Mono',monospace" font-size="8">Task Engine · Provider API · SSH</text>
|
||||
<text x="548" y="172" fill="#6b6050" font-family="'IBM Plex Mono',monospace" font-size="7">Webhooks · Rollback · Audit Collector</text>
|
||||
</g>
|
||||
<rect x="554" y="188" width="152" height="12" rx="6" fill="#f59e0b" opacity="0.08"/>
|
||||
<text x="630" y="197" text-anchor="middle" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="6" font-weight="700" opacity="0.6">SOLID: SOLE PROVIDER + SSH</text>
|
||||
|
||||
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
|
||||
<g>
|
||||
<rect x="755" y="257" width="190" height="68" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="755" y="257" width="190" height="68" rx="10" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="941" y="260" width="3" height="62" rx="1.5" fill="#818cf8" opacity="0.5"/>
|
||||
<circle cx="776" cy="279" r="8" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="776" y="283" text-anchor="middle" fill="#818cf8" font-size="9">◉</text>
|
||||
<text x="790" y="282" fill="#c0c0d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Control Center</text>
|
||||
<text x="920" y="282" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
|
||||
<circle cx="932" cy="279" r="3.5" fill="#818cf8" class="health health-d1"/>
|
||||
<text x="768" y="300" fill="#7070a0" font-family="'IBM Plex Mono',monospace" font-size="8">Cedar Policies · JWT · Sessions</text>
|
||||
<text x="768" y="314" fill="#5a5878" font-family="'IBM Plex Mono',monospace" font-size="7">WebSocket · RBAC · Solo: auto-session</text>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP (144°, lower-right) ─── -->
|
||||
<g>
|
||||
<rect x="685" y="510" width="190" height="68" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="685" y="510" width="190" height="68" rx="10" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="871" y="513" width="3" height="62" rx="1.5" fill="#22d3ee" opacity="0.5"/>
|
||||
<circle cx="706" cy="532" r="8" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="706" y="536" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
|
||||
<text x="720" y="535" fill="#c0d8d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">AI · MCP</text>
|
||||
<text x="850" y="535" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
|
||||
<circle cx="862" cy="532" r="3.5" fill="#22d3ee" class="health health-d2"/>
|
||||
<text x="698" y="553" fill="#508888" font-family="'IBM Plex Mono',monospace" font-size="8">RAG Engine · MCP Server · Tools</text>
|
||||
<text x="698" y="567" fill="#385a58" font-family="'IBM Plex Mono',monospace" font-size="7">Embeddings · Model Routing · KGraph</text>
|
||||
</g>
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (216°, lower-left) ─── -->
|
||||
<g>
|
||||
<rect x="405" y="510" width="190" height="68" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="405" y="510" width="190" height="68" rx="10" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="405" y="513" width="3" height="62" rx="1.5" fill="#ef4444" opacity="0.5"/>
|
||||
<circle cx="426" cy="532" r="8" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="426" y="536" text-anchor="middle" fill="#ef4444" font-size="9">⚙</text>
|
||||
<text x="440" y="535" fill="#d8c0c8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">Ext Registry</text>
|
||||
<text x="570" y="535" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
|
||||
<circle cx="582" cy="532" r="3.5" fill="#ef4444" class="health health-d3"/>
|
||||
<text x="418" y="553" fill="#884848" font-family="'IBM Plex Mono',monospace" font-size="8">Gitea · Forgejo · OCI · LRU</text>
|
||||
<text x="418" y="567" fill="#5a3848" font-family="'IBM Plex Mono',monospace" font-size="7">Providers · Taskservs · vault:// creds</text>
|
||||
</g>
|
||||
|
||||
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
|
||||
<g>
|
||||
<rect x="335" y="257" width="190" height="68" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="335" y="257" width="190" height="68" rx="10" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="335" y="260" width="3" height="62" rx="1.5" fill="#ec4899" opacity="0.5"/>
|
||||
<circle cx="356" cy="279" r="8" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="356" y="283" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
|
||||
<text x="370" y="282" fill="#d8c0d0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Vault Service</text>
|
||||
<text x="500" y="282" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
|
||||
<circle cx="512" cy="279" r="3.5" fill="#ec4899" class="health health-d4"/>
|
||||
<text x="348" y="300" fill="#885070" font-family="'IBM Plex Mono',monospace" font-size="8">Lease Lifecycle · Key Mgmt</text>
|
||||
<text x="348" y="314" fill="#5a3850" font-family="'IBM Plex Mono',monospace" font-size="7">SOPS · Age · Secrets never in NATS</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL BEAM (Vault ↔ Orch, bypasses ring) ═══ -->
|
||||
<line x1="520" y1="265" x2="545" y2="188" stroke="#fbbf24" stroke-width="2" class="https-beam" filter="url(#glow-gold)"/>
|
||||
<line x1="520" y1="265" x2="545" y2="188" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="515" y="228" fill="#fbbf24" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label" transform="rotate(-70,515,228)">HTTPS ONLY</text>
|
||||
|
||||
|
||||
<!-- ═══ ORBITAL PARTICLES (events flowing through the ring) ═══ -->
|
||||
|
||||
<!-- Particle 1: orange (tasks) clockwise 8s -->
|
||||
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle 2: pink (vault) clockwise 10s -->
|
||||
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle 3: blue counter-clockwise 7s -->
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle 4: purple clockwise 9s -->
|
||||
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
|
||||
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle 5: cyan counter-clockwise 11s -->
|
||||
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
|
||||
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle 6: red clockwise 12s -->
|
||||
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CREDENTIAL FLOW PARTICLES ═══ -->
|
||||
|
||||
<!-- Orch → Vault lease request (short arc) -->
|
||||
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
|
||||
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-orch-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Vault → Orch lease issued (reverse arc) -->
|
||||
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#path-vault-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- CLI → Orch task submission -->
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
|
||||
<g opacity="0.3">
|
||||
<line x1="640" y1="552" x2="640" y2="614" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="500" y1="540" x2="380" y2="614" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="780" y1="540" x2="900" y2="614" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SURREALDB PERSISTENCE LAYER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<g>
|
||||
<rect x="100" y="616" width="1080" height="54" rx="8" fill="url(#surreal-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="100" y="616" width="1080" height="54" rx="8" fill="none" stroke="#2e2450" stroke-width="1"/>
|
||||
<rect x="100" y="666" width="1080" height="4" rx="2" fill="#a78bfa" opacity="0.2"/>
|
||||
|
||||
<text x="640" y="632" text-anchor="middle" fill="#c4b5e0" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">SURREALDB PERSISTENCE</text>
|
||||
<text x="1120" y="632" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.4">Solo: RocksDB · Multi: WebSocket</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="128" y="642" width="140" height="18" rx="4" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="198" y="654" text-anchor="middle" fill="#a78bfa" opacity="0.8">orchestrator</text>
|
||||
|
||||
<rect x="282" y="642" width="120" height="18" rx="4" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="342" y="654" text-anchor="middle" fill="#a78bfa" opacity="0.8">vault</text>
|
||||
|
||||
<rect x="416" y="642" width="150" height="18" rx="4" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="491" y="654" text-anchor="middle" fill="#a78bfa" opacity="0.8">control_center</text>
|
||||
|
||||
<rect x="580" y="642" width="100" height="18" rx="4" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="630" y="654" text-anchor="middle" fill="#a78bfa" opacity="0.8">audit</text>
|
||||
|
||||
<rect x="694" y="642" width="140" height="18" rx="4" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="764" y="654" text-anchor="middle" fill="#a78bfa" opacity="0.8">workspace</text>
|
||||
|
||||
<rect x="848" y="642" width="110" height="18" rx="4" fill="none" stroke="#2e2450" stroke-width="0.4"/>
|
||||
<text x="903" y="654" text-anchor="middle" fill="#5a4878" opacity="0.6">Nickel config</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SOLID ENFORCEMENT INDICATORS ═══ -->
|
||||
|
||||
<g transform="translate(100, 690)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="0" y="8" width="84" height="14" rx="4" fill="#f59e0b" opacity="0.06" stroke="#f59e0b" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="42" y="19" text-anchor="middle" fill="#f59e0b" opacity="0.6">Compile-time</text>
|
||||
<rect x="92" y="8" width="72" height="14" rx="4" fill="#818cf8" opacity="0.06" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="128" y="19" text-anchor="middle" fill="#818cf8" opacity="0.6">Dev-time</text>
|
||||
<rect x="172" y="8" width="78" height="14" rx="4" fill="#ec4899" opacity="0.06" stroke="#ec4899" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="211" y="19" text-anchor="middle" fill="#ec4899" opacity="0.6">Pre-commit</text>
|
||||
<rect x="258" y="8" width="52" height="14" rx="4" fill="#ef4444" opacity="0.06" stroke="#ef4444" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="284" y="19" text-anchor="middle" fill="#ef4444" opacity="0.6">CI/CD</text>
|
||||
<rect x="318" y="8" width="64" height="14" rx="4" fill="#22d3ee" opacity="0.06" stroke="#22d3ee" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="350" y="19" text-anchor="middle" fill="#22d3ee" opacity="0.6">Runtime</text>
|
||||
<rect x="390" y="8" width="52" height="14" rx="4" fill="#94a3b8" opacity="0.06" stroke="#94a3b8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="416" y="19" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#3a3e48" opacity="0.5">
|
||||
<text x="500" y="12">Provider APIs: Orchestrator only</text>
|
||||
<text x="500" y="24">SSH: Orchestrator + Machines only</text>
|
||||
<text x="750" y="12">Auth: Control Center only</text>
|
||||
<text x="750" y="24">Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ LEGEND ═══ -->
|
||||
|
||||
<g transform="translate(100, 732)" font-family="'IBM Plex Mono',monospace" font-size="9">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">PLATFORM SERVICES</text>
|
||||
<circle cx="8" cy="14" r="3.5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="17" y="18" fill="#6b6050">Orchestrator (tasks, provider, SSH)</text>
|
||||
<circle cx="8" cy="28" r="3.5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="17" y="32" fill="#5a5878">Control Center (auth, sessions, Cedar)</text>
|
||||
<circle cx="8" cy="42" r="3.5" fill="#ec4899" opacity="0.8"/>
|
||||
<text x="17" y="46" fill="#5a3850">Vault Service (secrets, leases, crypto)</text>
|
||||
<circle cx="8" cy="56" r="3.5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="17" y="60" fill="#5a3848">Catalog Registry (providers, OCI)</text>
|
||||
<circle cx="8" cy="70" r="3.5" fill="#22d3ee" opacity="0.8"/>
|
||||
<text x="17" y="74" fill="#385a58">AI · MCP (RAG, tools, models)</text>
|
||||
|
||||
<text x="360" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
<circle cx="368" cy="14" r="6" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2"/>
|
||||
<text x="382" y="18" fill="#5a6278">NATS Orbital Ring (event bus, :4222)</text>
|
||||
<line x1="360" y1="28" x2="376" y2="28" stroke="#a78bfa" stroke-width="2"/>
|
||||
<text x="382" y="32" fill="#5a4878">SurrealDB (global store, embedded/WS)</text>
|
||||
<line x1="360" y1="42" x2="376" y2="42" stroke="#fbbf24" stroke-width="2"/>
|
||||
<text x="382" y="46" fill="#6b6050">HTTPS direct (credentials only)</text>
|
||||
<line x1="360" y1="56" x2="376" y2="56" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="382" y="60" fill="#4a6a8a">CLI → HTTP → Orchestrator</text>
|
||||
|
||||
<text x="700" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
<rect x="700" y="8" width="48" height="12" rx="3" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4" stroke-opacity="0.3"/>
|
||||
<text x="724" y="17" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="754" y="17" fill="#4a7a5a" font-size="8">Embedded RocksDB, local NATS, auto-session</text>
|
||||
<rect x="700" y="26" width="48" height="12" rx="3" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.3"/>
|
||||
<text x="724" y="35" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="754" y="35" fill="#5a5878" font-size="8">WS SurrealDB, NATS cluster, JWT+Cedar</text>
|
||||
<text x="700" y="56" fill="#3a3e48" font-size="7" opacity="0.6">Same architecture, same NATS subjects,</text>
|
||||
<text x="700" y="66" fill="#3a3e48" font-size="7" opacity="0.6">same schema. Only auth differs.</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DEPLOYMENT TARGETS ═══ -->
|
||||
|
||||
<g transform="translate(0, 828)" font-family="'IBM Plex Mono',monospace">
|
||||
<rect x="140" y="0" width="130" height="34" rx="7" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="156" cy="13" r="3.5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="166" y="16" fill="#d0a0a0" font-size="9" font-weight="500">Production</text>
|
||||
<text x="156" y="28" fill="#5a3838" font-size="7">Hetzner · AWS</text>
|
||||
|
||||
<rect x="290" y="0" width="130" height="34" rx="7" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="306" cy="13" r="3.5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="316" y="16" fill="#d0c0a0" font-size="9" font-weight="500">Staging</text>
|
||||
<text x="306" y="28" fill="#5a5038" font-size="7">K8s cluster</text>
|
||||
|
||||
<rect x="440" y="0" width="130" height="34" rx="7" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="456" cy="13" r="3.5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="466" y="16" fill="#a0d0b8" font-size="9" font-weight="500">Dev</text>
|
||||
<text x="456" y="28" fill="#385a48" font-size="7">Solo mode</text>
|
||||
|
||||
<rect x="590" y="0" width="130" height="34" rx="7" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="606" cy="13" r="3.5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="616" y="16" fill="#b0b0d8" font-size="9" font-weight="500">Edge</text>
|
||||
<text x="606" y="28" fill="#48486a" font-size="7">On-prem · IoT</text>
|
||||
|
||||
<rect x="740" y="0" width="130" height="34" rx="7" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="756" cy="13" r="3.5" fill="#22d3ee" opacity="0.8"/>
|
||||
<text x="766" y="16" fill="#a0c8c8" font-size="9" font-weight="500">Custom</text>
|
||||
<text x="756" y="28" fill="#385858" font-size="7">GitOps · Webhook</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ VERSION ═══ -->
|
||||
<text x="1180" y="888" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v4.0 · Control Plane Architecture</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 31 KiB |
|
|
@ -1,732 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
/* Flowing dashed lines */
|
||||
.flow-down { animation: dash-down 1.8s linear infinite; }
|
||||
.flow-up { animation: dash-up 1.8s linear infinite; }
|
||||
.flow-right{ animation: dash-right 2.5s linear infinite; }
|
||||
|
||||
@keyframes dash-down { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
|
||||
@keyframes dash-up { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 24; } }
|
||||
@keyframes dash-right { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
/* Service health pulse */
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.35; r: 4; }
|
||||
50% { opacity: 1; r: 5; }
|
||||
}
|
||||
|
||||
/* NATS bus glow breathing */
|
||||
.nats-glow { animation: nats-breathe 3s ease-in-out infinite; }
|
||||
@keyframes nats-breathe {
|
||||
0%, 100% { opacity: 0.12; }
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
/* NATS particle flow */
|
||||
.nats-particle { opacity: 0; }
|
||||
.np1 { animation: particle-lr 5s linear 0s infinite; }
|
||||
.np2 { animation: particle-lr 5s linear 1.2s infinite; }
|
||||
.np3 { animation: particle-lr 5s linear 2.4s infinite; }
|
||||
.np4 { animation: particle-rl 6s linear 0.5s infinite; }
|
||||
.np5 { animation: particle-rl 6s linear 2.8s infinite; }
|
||||
|
||||
@keyframes particle-lr {
|
||||
0% { transform: translateX(0); opacity: 0; }
|
||||
5% { opacity: 0.9; }
|
||||
90% { opacity: 0.9; }
|
||||
100% { transform: translateX(1100px); opacity: 0; }
|
||||
}
|
||||
@keyframes particle-rl {
|
||||
0% { transform: translateX(0); opacity: 0; }
|
||||
5% { opacity: 0.7; }
|
||||
90% { opacity: 0.7; }
|
||||
100% { transform: translateX(-1100px); opacity: 0; }
|
||||
}
|
||||
|
||||
/* HTTPS credential line pulse */
|
||||
.https-line { animation: https-pulse 4s ease-in-out infinite; }
|
||||
@keyframes https-pulse {
|
||||
0%, 100% { opacity: 0.25; stroke-width: 1.5; }
|
||||
50% { opacity: 0.8; stroke-width: 2.5; }
|
||||
}
|
||||
|
||||
.https-label { animation: https-label-pulse 4s ease-in-out infinite; }
|
||||
@keyframes https-label-pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* SOLID boundary glow */
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow {
|
||||
0%, 100% { stroke-opacity: 0.3; }
|
||||
50% { stroke-opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Infinite engine rotation */
|
||||
.engine-outer { animation: engine-spin 20s linear infinite; transform-origin: 640px 365px; }
|
||||
.engine-inner { animation: engine-spin-rev 12s linear infinite; transform-origin: 640px 365px; }
|
||||
.engine-core { animation: engine-pulse 3s ease-in-out infinite; transform-origin: 640px 365px; }
|
||||
|
||||
@keyframes engine-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
@keyframes engine-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
|
||||
@keyframes engine-pulse {
|
||||
0%, 100% { opacity: 0.15; transform: scale(1); }
|
||||
50% { opacity: 0.3; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Credential flow particles */
|
||||
.cred-dot { opacity: 0; }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<!-- Glow filters (preserved from v1) -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="nats-shadow" x="-10%" y="-30%" width="120%" height="160%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur"/>
|
||||
<feFlood flood-color="#94a3b8" flood-opacity="0.15" result="color"/>
|
||||
<feComposite in="color" in2="blur" operator="in"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="bg-radial" cx="50%" cy="40%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/>
|
||||
<stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/>
|
||||
<stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/>
|
||||
<stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/>
|
||||
<stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/>
|
||||
<stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="nats-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#161b24"/>
|
||||
<stop offset="100%" stop-color="#0e1118"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/>
|
||||
<stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/>
|
||||
<stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-orange" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arr-pink" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#ec4899"/>
|
||||
</marker>
|
||||
<marker id="arr-purple" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#818cf8"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-red" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#ef4444"/>
|
||||
</marker>
|
||||
<marker id="arr-cyan" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#22d3ee"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
|
||||
<!-- Credential flow paths -->
|
||||
<path id="path-orch-nats-vault"
|
||||
d="M 585,315 L 585,365 L 205,365 L 205,315"
|
||||
fill="none"/>
|
||||
<path id="path-vault-nats-orch"
|
||||
d="M 205,315 L 205,375 L 585,375 L 585,315"
|
||||
fill="none"/>
|
||||
<path id="path-task-cli-orch"
|
||||
d="M 640,130 L 640,180"
|
||||
fill="none"/>
|
||||
<path id="path-status-nats-cli"
|
||||
d="M 585,345 L 585,215 L 640,130"
|
||||
fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<text x="640" y="30" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans', sans-serif" font-weight="700" font-size="17" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="52" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="62" x2="770" y2="62" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
|
||||
<!-- ═══ CLI INPUT ═══ -->
|
||||
<g>
|
||||
<rect x="510" y="76" width="260" height="50" rx="10" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="510" y="76" width="260" height="50" rx="10" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="510" y="80" width="4" height="42" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<circle cx="536" cy="95" r="9" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="536" y="99" text-anchor="middle" fill="#4a9eff" font-size="9" font-family="'IBM Plex Mono', monospace">$</text>
|
||||
|
||||
<text x="554" y="95" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="600" font-size="12" letter-spacing="0.6">CLI</text>
|
||||
<text x="527" y="116" fill="#6b8aaa" font-family="'IBM Plex Mono', monospace" font-size="9">provisioning create server</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="126" x2="640" y2="176" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="6 4" class="flow-down" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
<rect x="614" y="141" width="52" height="14" rx="7" fill="#4a9eff" opacity="0.08"/>
|
||||
<text x="640" y="152" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="7" font-weight="600" opacity="0.6">HTTP</text>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- UPPER SERVICE TIER -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── VAULT SERVICE (left) ─── -->
|
||||
<g>
|
||||
<rect x="60" y="180" width="290" height="132" rx="12" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="60" y="180" width="290" height="132" rx="12" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="60" y="180" width="4" height="132" rx="2" fill="#ec4899" opacity="0.5"/>
|
||||
|
||||
<circle cx="88" cy="202" r="10" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="88" y="206" text-anchor="middle" fill="#ec4899" font-size="10">🛡</text>
|
||||
|
||||
<text x="106" y="206" fill="#d8c0d0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.7">Vault Service</text>
|
||||
<text x="320" y="206" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono', monospace" font-size="9" opacity="0.5">:9094</text>
|
||||
<circle cx="336" cy="202" r="4" fill="#ec4899" class="health"/>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="78" y="220" width="104" height="19" rx="5" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.7"/>
|
||||
<text x="130" y="233" text-anchor="middle" fill="#ec4899" opacity="0.85">Lease Lifecycle</text>
|
||||
|
||||
<rect x="190" y="220" width="104" height="19" rx="5" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.7"/>
|
||||
<text x="242" y="233" text-anchor="middle" fill="#ec4899" opacity="0.85">Key Management</text>
|
||||
|
||||
<rect x="78" y="247" width="216" height="17" rx="4" fill="none" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="186" y="259" text-anchor="middle" fill="#5a3850" font-size="8">SOPS · Age · Seal/Unseal · Rotation</text>
|
||||
|
||||
<rect x="78" y="272" width="216" height="17" rx="4" fill="none" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="186" y="284" text-anchor="middle" fill="#5a3850" font-size="8">Secrets never in NATS — lease_id only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── ORCHESTRATOR (center, main) ─── -->
|
||||
<g>
|
||||
<!-- SOLID boundary overlay (animated glow) -->
|
||||
<rect x="432" y="172" width="306" height="148" rx="16" fill="none"
|
||||
stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
|
||||
<rect x="440" y="180" width="290" height="132" rx="12" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="440" y="180" width="290" height="132" rx="12" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="440" y="180" width="4" height="132" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<circle cx="468" cy="202" r="10" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="468" y="206" text-anchor="middle" fill="#f59e0b" font-size="10">▶</text>
|
||||
|
||||
<text x="486" y="206" fill="#d8ccc0" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.7">Orchestrator</text>
|
||||
<text x="700" y="206" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono', monospace" font-size="9" opacity="0.5">:9011</text>
|
||||
<circle cx="716" cy="202" r="4" fill="#f59e0b" class="health health-d1"/>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="458" y="220" width="112" height="19" rx="5" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.7"/>
|
||||
<text x="514" y="233" text-anchor="middle" fill="#f59e0b" opacity="0.85">Task State Mach</text>
|
||||
|
||||
<rect x="578" y="220" width="92" height="19" rx="5" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.7"/>
|
||||
<text x="624" y="233" text-anchor="middle" fill="#f59e0b" opacity="0.85">Provider API</text>
|
||||
|
||||
<rect x="458" y="247" width="92" height="17" rx="4" fill="none" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="504" y="259" text-anchor="middle" fill="#6b6050" font-size="8">SSH/Machines</text>
|
||||
|
||||
<rect x="558" y="247" width="92" height="17" rx="4" fill="none" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="604" y="259" text-anchor="middle" fill="#6b6050" font-size="8">Webhooks</text>
|
||||
|
||||
<rect x="458" y="272" width="192" height="17" rx="4" fill="none" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="554" y="284" text-anchor="middle" fill="#6b6050" font-size="8">Rollback · Audit Collector · Logs</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SOLID badge on Orchestrator -->
|
||||
<rect x="450" y="296" width="182" height="14" rx="7" fill="#f59e0b" opacity="0.1"/>
|
||||
<text x="541" y="306" text-anchor="middle" fill="#f59e0b" font-family="'IBM Plex Mono', monospace" font-size="7" font-weight="700" letter-spacing="0.3" opacity="0.7">SOLID: SOLE PROVIDER + SSH ACCESS</text>
|
||||
|
||||
<!-- ─── CONTROL CENTER (right) ─── -->
|
||||
<g>
|
||||
<rect x="820" y="180" width="290" height="132" rx="12" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="820" y="180" width="290" height="132" rx="12" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="1106" y="180" width="4" height="132" rx="2" fill="#818cf8" opacity="0.5"/>
|
||||
|
||||
<circle cx="848" cy="202" r="10" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="848" y="206" text-anchor="middle" fill="#818cf8" font-size="10">◉</text>
|
||||
|
||||
<text x="866" y="206" fill="#c0c0d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.7">Control Center</text>
|
||||
<text x="1080" y="206" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono', monospace" font-size="9" opacity="0.5">:9012</text>
|
||||
<circle cx="1096" cy="202" r="4" fill="#818cf8" class="health health-d2"/>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="838" y="220" width="108" height="19" rx="5" fill="#110f1e" stroke="#2e2848" stroke-width="0.7"/>
|
||||
<text x="892" y="233" text-anchor="middle" fill="#818cf8" opacity="0.85">Cedar Policies</text>
|
||||
|
||||
<rect x="954" y="220" width="100" height="19" rx="5" fill="#110f1e" stroke="#2e2848" stroke-width="0.7"/>
|
||||
<text x="1004" y="233" text-anchor="middle" fill="#818cf8" opacity="0.85">JWT/Sessions</text>
|
||||
|
||||
<rect x="838" y="247" width="108" height="17" rx="4" fill="none" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="892" y="259" text-anchor="middle" fill="#5a5878" font-size="8">WebSocket Bridge</text>
|
||||
|
||||
<rect x="954" y="247" width="100" height="17" rx="4" fill="none" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="1004" y="259" text-anchor="middle" fill="#5a5878" font-size="8">RBAC/MFA</text>
|
||||
|
||||
<rect x="838" y="272" width="216" height="17" rx="4" fill="none" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="946" y="284" text-anchor="middle" fill="#5a5878" font-size="8">Solo: auto-session · Multi: full auth</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL LINE (Orch ↔ Vault, bypasses NATS) ═══ -->
|
||||
<path d="M 440,248 C 415,180 395,180 350,248" fill="none"
|
||||
stroke="#fbbf24" stroke-width="2" class="https-line" filter="url(#glow-gold)"/>
|
||||
<path d="M 350,248 C 395,180 415,180 440,248" fill="none"
|
||||
stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" class="https-line" opacity="0.5"/>
|
||||
|
||||
<rect x="362" y="172" width="68" height="14" rx="7" fill="#fbbf24" opacity="0.08"/>
|
||||
<text x="396" y="182" text-anchor="middle" fill="#fbbf24" font-family="'IBM Plex Mono', monospace" font-size="7" font-weight="700" class="https-label">HTTPS ONLY</text>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS: SERVICES → NATS ═══ -->
|
||||
|
||||
<!-- Vault → NATS -->
|
||||
<line x1="205" y1="312" x2="205" y2="340" stroke="#ec4899" stroke-width="1.2" stroke-dasharray="5 4" class="flow-down" opacity="0.6" marker-end="url(#arr-pink)"/>
|
||||
<!-- Orchestrator → NATS -->
|
||||
<line x1="585" y1="312" x2="585" y2="340" stroke="#f59e0b" stroke-width="1.2" stroke-dasharray="5 4" class="flow-down" opacity="0.6" marker-end="url(#arr-orange)"/>
|
||||
<!-- Control Center → NATS -->
|
||||
<line x1="965" y1="312" x2="965" y2="340" stroke="#818cf8" stroke-width="1.2" stroke-dasharray="5 4" class="flow-down" opacity="0.6" marker-end="url(#arr-purple)"/>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- NATS JETSTREAM EVENT BUS -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer glow -->
|
||||
<rect x="50" y="342" width="1180" height="46" rx="8" fill="#94a3b8" opacity="0.03" class="nats-glow"/>
|
||||
<rect x="50" y="341" width="1180" height="48" rx="9" fill="none" stroke="#94a3b8" stroke-width="0.8" opacity="0.15" class="nats-glow"/>
|
||||
|
||||
<!-- Main band -->
|
||||
<rect x="50" y="342" width="1180" height="46" rx="8" fill="url(#nats-grad)" filter="url(#nats-shadow)"/>
|
||||
<rect x="50" y="342" width="1180" height="46" rx="8" fill="none" stroke="#2a3040" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bars -->
|
||||
<rect x="50" y="342" width="4" height="46" rx="2" fill="#94a3b8" opacity="0.4"/>
|
||||
<rect x="1226" y="342" width="4" height="46" rx="2" fill="#94a3b8" opacity="0.4"/>
|
||||
|
||||
<!-- ═══ INFINITE ENGINE (perpetual motion at NATS hub core) ═══ -->
|
||||
|
||||
<!-- Outer gear ring — 6 teeth, slow clockwise 20s -->
|
||||
<g class="engine-outer">
|
||||
<circle cx="640" cy="365" r="20" fill="none" stroke="#94a3b8" stroke-width="1.5"
|
||||
stroke-dasharray="5.24 5.24" opacity="0.18"/>
|
||||
<line x1="640" y1="345" x2="640" y2="341" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="657.32" y1="355" x2="660.78" y2="353" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="657.32" y1="375" x2="660.78" y2="377" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="640" y1="385" x2="640" y2="389" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="622.68" y1="375" x2="619.22" y2="377" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="622.68" y1="355" x2="619.22" y2="353" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
</g>
|
||||
|
||||
<!-- Inner gear ring — 4 spokes, faster counter-clockwise 12s -->
|
||||
<g class="engine-inner">
|
||||
<circle cx="640" cy="365" r="12" fill="none" stroke="#c8d0dc" stroke-width="1"
|
||||
stroke-dasharray="3.77 3.77" opacity="0.22"/>
|
||||
<line x1="640" y1="353" x2="640" y2="356" stroke="#c8d0dc" stroke-width="1.5" stroke-linecap="round" opacity="0.22"/>
|
||||
<line x1="652" y1="365" x2="649" y2="365" stroke="#c8d0dc" stroke-width="1.5" stroke-linecap="round" opacity="0.22"/>
|
||||
<line x1="640" y1="377" x2="640" y2="374" stroke="#c8d0dc" stroke-width="1.5" stroke-linecap="round" opacity="0.22"/>
|
||||
<line x1="628" y1="365" x2="631" y2="365" stroke="#c8d0dc" stroke-width="1.5" stroke-linecap="round" opacity="0.22"/>
|
||||
</g>
|
||||
|
||||
<!-- Engine core — breathing pulse 3s -->
|
||||
<circle cx="640" cy="365" r="4" fill="#c8d0dc" class="engine-core"/>
|
||||
|
||||
<!-- Bus label -->
|
||||
<text x="640" y="360" text-anchor="middle" fill="#c8d0dc" font-family="'DM Sans', sans-serif" font-weight="700" font-size="11" letter-spacing="1">NATS JETSTREAM EVENT BUS</text>
|
||||
|
||||
<!-- Subject lanes -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="7" fill="#5a6278" opacity="0.7">
|
||||
<text x="115" y="380">tasks.></text>
|
||||
<text x="260" y="380">vault.></text>
|
||||
<text x="415" y="380">auth.></text>
|
||||
<text x="600" y="380">workspace.></text>
|
||||
<text x="780" y="380">audit.></text>
|
||||
<text x="940" y="380">health.></text>
|
||||
|
||||
<!-- Subject separators -->
|
||||
<line x1="220" y1="370" x2="220" y2="385" stroke="#2a3040" stroke-width="0.5"/>
|
||||
<line x1="375" y1="370" x2="375" y2="385" stroke="#2a3040" stroke-width="0.5"/>
|
||||
<line x1="560" y1="370" x2="560" y2="385" stroke="#2a3040" stroke-width="0.5"/>
|
||||
<line x1="740" y1="370" x2="740" y2="385" stroke="#2a3040" stroke-width="0.5"/>
|
||||
<line x1="900" y1="370" x2="900" y2="385" stroke="#2a3040" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Port label -->
|
||||
<text x="1100" y="380" fill="#94a3b8" font-family="'IBM Plex Mono', monospace" font-size="7" opacity="0.4">:4222</text>
|
||||
|
||||
<!-- Animated particles flowing through NATS bus -->
|
||||
<g>
|
||||
<circle cx="70" cy="365" r="3" fill="#f59e0b" class="nats-particle np1" filter="url(#glow-orange)"/>
|
||||
<circle cx="70" cy="362" r="2.5" fill="#ec4899" class="nats-particle np2" filter="url(#glow-pink)"/>
|
||||
<circle cx="70" cy="368" r="2" fill="#818cf8" class="nats-particle np3" filter="url(#glow-purple)"/>
|
||||
<circle cx="1200" cy="366" r="2.5" fill="#4a9eff" class="nats-particle np4" filter="url(#glow-blue)"/>
|
||||
<circle cx="1200" cy="363" r="2" fill="#22d3ee" class="nats-particle np5" filter="url(#glow-cyan)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS: NATS → LOWER SERVICES ═══ -->
|
||||
|
||||
<!-- NATS → Catalog Registry -->
|
||||
<line x1="270" y1="388" x2="270" y2="418" stroke="#ef4444" stroke-width="1.2" stroke-dasharray="5 4" class="flow-down" opacity="0.6" marker-end="url(#arr-red)"/>
|
||||
<!-- NATS → AI/MCP -->
|
||||
<line x1="980" y1="388" x2="980" y2="418" stroke="#22d3ee" stroke-width="1.2" stroke-dasharray="5 4" class="flow-down" opacity="0.6" marker-end="url(#arr-cyan)"/>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- LOWER SERVICE TIER -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (left) ─── -->
|
||||
<g>
|
||||
<rect x="80" y="420" width="320" height="115" rx="12" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="80" y="420" width="320" height="115" rx="12" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="80" y="420" width="4" height="115" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<circle cx="108" cy="442" r="10" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="108" y="446" text-anchor="middle" fill="#ef4444" font-size="10">⚙️</text>
|
||||
|
||||
<text x="126" y="446" fill="#d8c0c8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.7">Catalog Registry</text>
|
||||
<text x="370" y="446" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="9" opacity="0.5">:8084</text>
|
||||
<circle cx="386" cy="442" r="4" fill="#ef4444" class="health health-d3"/>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="98" y="460" width="98" height="19" rx="5" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.7"/>
|
||||
<text x="147" y="473" text-anchor="middle" fill="#ef4444" opacity="0.85">Gitea/Forgejo</text>
|
||||
|
||||
<rect x="204" y="460" width="80" height="19" rx="5" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.7"/>
|
||||
<text x="244" y="473" text-anchor="middle" fill="#ef4444" opacity="0.85">OCI Dist</text>
|
||||
|
||||
<rect x="292" y="460" width="80" height="19" rx="5" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.7"/>
|
||||
<text x="332" y="473" text-anchor="middle" fill="#ef4444" opacity="0.85">LRU+TTL</text>
|
||||
|
||||
<rect x="98" y="487" width="272" height="17" rx="4" fill="none" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="234" y="499" text-anchor="middle" fill="#5a3848" font-size="8">Providers · Taskservs · Clusters · vault:// creds</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Center: Webhook / Forgejo indicator -->
|
||||
<g opacity="0.5">
|
||||
<rect x="478" y="432" width="150" height="38" rx="8" fill="#0e1118" stroke="#2a3040" stroke-width="0.6"/>
|
||||
<text x="553" y="449" text-anchor="middle" fill="#94a3b8" font-family="'IBM Plex Mono', monospace" font-size="8">Forgejo Webhook</text>
|
||||
<text x="553" y="462" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-size="7">workspace.*.deploy</text>
|
||||
<!-- Arrow into NATS (upward) -->
|
||||
<line x1="553" y1="432" x2="553" y2="390" stroke="#94a3b8" stroke-width="0.8" stroke-dasharray="3 3" class="flow-up" opacity="0.5" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP SERVICE (right) ─── -->
|
||||
<g>
|
||||
<rect x="760" y="420" width="320" height="115" rx="12" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="760" y="420" width="320" height="115" rx="12" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="1076" y="420" width="4" height="115" rx="2" fill="#22d3ee" opacity="0.5"/>
|
||||
|
||||
<circle cx="788" cy="442" r="10" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="788" y="446" text-anchor="middle" fill="#22d3ee" font-size="10">🧠</text>
|
||||
|
||||
<text x="806" y="446" fill="#c0d8d8" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.7">AI · MCP</text>
|
||||
<text x="1050" y="446" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono', monospace" font-size="9" opacity="0.5">:9082</text>
|
||||
<circle cx="1066" cy="442" r="4" fill="#22d3ee" class="health health-d4"/>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="778" y="460" width="98" height="19" rx="5" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.7"/>
|
||||
<text x="827" y="473" text-anchor="middle" fill="#22d3ee" opacity="0.85">RAG Engine</text>
|
||||
|
||||
<rect x="884" y="460" width="98" height="19" rx="5" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.7"/>
|
||||
<text x="933" y="473" text-anchor="middle" fill="#22d3ee" opacity="0.85">MCP Server</text>
|
||||
|
||||
<rect x="990" y="460" width="62" height="19" rx="5" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.7"/>
|
||||
<text x="1021" y="473" text-anchor="middle" fill="#22d3ee" opacity="0.85">Tools</text>
|
||||
|
||||
<rect x="778" y="487" width="272" height="17" rx="4" fill="none" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="914" y="499" text-anchor="middle" fill="#385a58" font-size="8">Embeddings · Model Routing · Knowledge Graph</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS: ALL SERVICES → SURREALDB ═══ -->
|
||||
<g opacity="0.35">
|
||||
<line x1="205" y1="535" x2="205" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="flow-down" marker-end="url(#arr-silver)"/>
|
||||
<line x1="585" y1="312" x2="585" y2="335" stroke="none"/>
|
||||
<line x1="430" y1="535" x2="430" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="flow-down" marker-end="url(#arr-silver)"/>
|
||||
<line x1="640" y1="470" x2="640" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="flow-down" marker-end="url(#arr-silver)"/>
|
||||
<line x1="850" y1="535" x2="850" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="flow-down" marker-end="url(#arr-silver)"/>
|
||||
<line x1="1075" y1="535" x2="1075" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="flow-down" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- SURREALDB PERSISTENCE LAYER -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<g>
|
||||
<rect x="50" y="572" width="1180" height="62" rx="8" fill="url(#surreal-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="50" y="572" width="1180" height="62" rx="8" fill="none" stroke="#2e2450" stroke-width="1"/>
|
||||
|
||||
<!-- Accent bars -->
|
||||
<rect x="50" y="630" width="1180" height="4" rx="2" fill="#a78bfa" opacity="0.2"/>
|
||||
|
||||
<!-- Label -->
|
||||
<text x="640" y="588" text-anchor="middle" fill="#c4b5e0" font-family="'DM Sans', sans-serif" font-weight="700" font-size="11" letter-spacing="1">SURREALDB PERSISTENCE</text>
|
||||
|
||||
<!-- Mode indicator -->
|
||||
<text x="1170" y="588" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono', monospace" font-size="7" opacity="0.4">Solo: RocksDB · Multi: WebSocket</text>
|
||||
|
||||
<!-- 5 Namespace boxes -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="8">
|
||||
<rect x="78" y="598" width="170" height="22" rx="5" fill="#110e1c" stroke="#2e2450" stroke-width="0.6"/>
|
||||
<text x="163" y="613" text-anchor="middle" fill="#a78bfa" opacity="0.8">orchestrator</text>
|
||||
<text x="163" y="625" text-anchor="middle" fill="#5a4878" font-size="6">tasks · logs · config_hashes</text>
|
||||
|
||||
<rect x="262" y="598" width="140" height="22" rx="5" fill="#110e1c" stroke="#2e2450" stroke-width="0.6"/>
|
||||
<text x="332" y="613" text-anchor="middle" fill="#a78bfa" opacity="0.8">vault</text>
|
||||
<text x="332" y="625" text-anchor="middle" fill="#5a4878" font-size="6">secrets · keys · leases</text>
|
||||
|
||||
<rect x="416" y="598" width="170" height="22" rx="5" fill="#110e1c" stroke="#2e2450" stroke-width="0.6"/>
|
||||
<text x="501" y="613" text-anchor="middle" fill="#a78bfa" opacity="0.8">control_center</text>
|
||||
<text x="501" y="625" text-anchor="middle" fill="#5a4878" font-size="6">users · sessions · cedar</text>
|
||||
|
||||
<rect x="600" y="598" width="120" height="22" rx="5" fill="#110e1c" stroke="#2e2450" stroke-width="0.6"/>
|
||||
<text x="660" y="613" text-anchor="middle" fill="#a78bfa" opacity="0.8">audit</text>
|
||||
<text x="660" y="625" text-anchor="middle" fill="#5a4878" font-size="6">events · metrics</text>
|
||||
|
||||
<rect x="734" y="598" width="170" height="22" rx="5" fill="#110e1c" stroke="#2e2450" stroke-width="0.6"/>
|
||||
<text x="819" y="613" text-anchor="middle" fill="#a78bfa" opacity="0.8">workspace</text>
|
||||
<text x="819" y="625" text-anchor="middle" fill="#5a4878" font-size="6">registrations · deployments · git</text>
|
||||
|
||||
<!-- Config indicator -->
|
||||
<rect x="918" y="598" width="130" height="22" rx="5" fill="none" stroke="#2e2450" stroke-width="0.4"/>
|
||||
<text x="983" y="613" text-anchor="middle" fill="#5a4878" opacity="0.6">Nickel config</text>
|
||||
<text x="983" y="625" text-anchor="middle" fill="#5a4878" font-size="6">platform-config crate</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- SOLID ENFORCEMENT INDICATORS -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(50, 655)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono', monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="7" fill="#5a6070">
|
||||
<rect x="0" y="8" width="88" height="16" rx="4" fill="#f59e0b" opacity="0.06" stroke="#f59e0b" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="44" y="20" text-anchor="middle" fill="#f59e0b" opacity="0.6">Compile-time</text>
|
||||
|
||||
<rect x="96" y="8" width="76" height="16" rx="4" fill="#818cf8" opacity="0.06" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="134" y="20" text-anchor="middle" fill="#818cf8" opacity="0.6">Dev-time</text>
|
||||
|
||||
<rect x="180" y="8" width="82" height="16" rx="4" fill="#ec4899" opacity="0.06" stroke="#ec4899" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="221" y="20" text-anchor="middle" fill="#ec4899" opacity="0.6">Pre-commit</text>
|
||||
|
||||
<rect x="270" y="8" width="56" height="16" rx="4" fill="#ef4444" opacity="0.06" stroke="#ef4444" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="298" y="20" text-anchor="middle" fill="#ef4444" opacity="0.6">CI/CD</text>
|
||||
|
||||
<rect x="334" y="8" width="68" height="16" rx="4" fill="#22d3ee" opacity="0.06" stroke="#22d3ee" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="368" y="20" text-anchor="middle" fill="#22d3ee" opacity="0.6">Runtime</text>
|
||||
|
||||
<rect x="410" y="8" width="56" height="16" rx="4" fill="#94a3b8" opacity="0.06" stroke="#94a3b8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="438" y="20" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
|
||||
<!-- Key rules -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="7" fill="#3a3e48" opacity="0.5">
|
||||
<text x="520" y="12">Provider APIs: Orchestrator only</text>
|
||||
<text x="520" y="24">SSH: Orchestrator + Machines only</text>
|
||||
<text x="780" y="12">Auth: Control Center only</text>
|
||||
<text x="780" y="24">Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- ANIMATED CREDENTIAL FLOW -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<!-- Particle: Orch → NATS → Vault (lease request) -->
|
||||
<circle r="3.5" fill="#f59e0b" class="cred-dot" filter="url(#glow-orange)">
|
||||
<animateMotion dur="3s" begin="0s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
|
||||
<mpath href="#path-orch-nats-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.85;1" dur="3s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle: Vault → NATS → Orch (lease issued) -->
|
||||
<circle r="3" fill="#ec4899" class="cred-dot" filter="url(#glow-pink)">
|
||||
<animateMotion dur="3s" begin="3.5s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
|
||||
<mpath href="#path-vault-nats-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.1;0.85;1" dur="3s" begin="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Particle: CLI → Orch (task submission) -->
|
||||
<circle r="3" fill="#4a9eff" class="cred-dot" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
|
||||
<mpath href="#path-task-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.15;0.7;1" dur="1.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(50, 700)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<!-- Column 1: Services -->
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">PLATFORM SERVICES</text>
|
||||
|
||||
<circle cx="8" cy="14" r="4" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="18" y="18" fill="#6b6050">Orchestrator (tasks, provider, SSH)</text>
|
||||
|
||||
<circle cx="8" cy="30" r="4" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="18" y="34" fill="#5a5878">Control Center (auth, sessions, Cedar)</text>
|
||||
|
||||
<circle cx="8" cy="46" r="4" fill="#ec4899" opacity="0.8"/>
|
||||
<text x="18" y="50" fill="#5a3850">Vault Service (secrets, leases, crypto)</text>
|
||||
|
||||
<circle cx="8" cy="62" r="4" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="18" y="66" fill="#5a3848">Catalog Registry (providers, OCI)</text>
|
||||
|
||||
<circle cx="8" cy="78" r="4" fill="#22d3ee" opacity="0.8"/>
|
||||
<text x="18" y="82" fill="#385a58">AI · MCP (RAG, tools, models)</text>
|
||||
|
||||
<!-- Column 2: Infrastructure -->
|
||||
<text x="380" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
|
||||
<line x1="380" y1="14" x2="404" y2="14" stroke="#94a3b8" stroke-width="2"/>
|
||||
<text x="410" y="18" fill="#5a6278">NATS JetStream (event bus, :4222)</text>
|
||||
|
||||
<line x1="380" y1="30" x2="404" y2="30" stroke="#a78bfa" stroke-width="2"/>
|
||||
<text x="410" y="34" fill="#5a4878">SurrealDB (global store, embedded/WS)</text>
|
||||
|
||||
<line x1="380" y1="46" x2="404" y2="46" stroke="#fbbf24" stroke-width="2"/>
|
||||
<text x="410" y="50" fill="#6b6050">HTTPS direct (credentials only)</text>
|
||||
|
||||
<line x1="380" y1="62" x2="404" y2="62" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="410" y="66" fill="#4a6a8a">CLI → HTTP → Orchestrator</text>
|
||||
|
||||
<!-- Column 3: Modes -->
|
||||
<text x="740" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
|
||||
<rect x="740" y="8" width="52" height="14" rx="4" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4" stroke-opacity="0.3"/>
|
||||
<text x="766" y="19" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="798" y="19" fill="#4a7a5a" font-size="8">Embedded RocksDB, local NATS, auto-session</text>
|
||||
|
||||
<rect x="740" y="28" width="52" height="14" rx="4" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.3"/>
|
||||
<text x="766" y="39" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="798" y="39" fill="#5a5878" font-size="8">WS SurrealDB, NATS cluster, JWT+Cedar</text>
|
||||
|
||||
<!-- Architecture note -->
|
||||
<text x="740" y="62" fill="#3a3e48" font-size="7" opacity="0.6">Same architecture, same NATS subjects,</text>
|
||||
<text x="740" y="72" fill="#3a3e48" font-size="7" opacity="0.6">same schema. Only auth differs.</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS -->
|
||||
<!-- ═════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(0, 800)" font-family="'IBM Plex Mono', monospace">
|
||||
<rect x="110" y="0" width="140" height="40" rx="8" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="128" cy="16" r="4" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="140" y="19" fill="#d0a0a0" font-size="10" font-weight="500">Production</text>
|
||||
<text x="128" y="32" fill="#5a3838" font-size="8">Hetzner · AWS</text>
|
||||
|
||||
<rect x="278" y="0" width="140" height="40" rx="8" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="296" cy="16" r="4" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="308" y="19" fill="#d0c0a0" font-size="10" font-weight="500">Staging</text>
|
||||
<text x="296" y="32" fill="#5a5038" font-size="8">K8s cluster</text>
|
||||
|
||||
<rect x="446" y="0" width="140" height="40" rx="8" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="464" cy="16" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="476" y="19" fill="#a0d0b8" font-size="10" font-weight="500">Dev</text>
|
||||
<text x="464" y="32" fill="#385a48" font-size="8">Solo mode</text>
|
||||
|
||||
<rect x="614" y="0" width="140" height="40" rx="8" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="632" cy="16" r="4" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="644" y="19" fill="#b0b0d8" font-size="10" font-weight="500">Edge</text>
|
||||
<text x="632" y="32" fill="#48486a" font-size="8">On-prem · IoT</text>
|
||||
|
||||
<rect x="782" y="0" width="140" height="40" rx="8" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="800" cy="16" r="4" fill="#22d3ee" opacity="0.8"/>
|
||||
<text x="812" y="19" fill="#a0c8c8" font-size="10" font-weight="500">Custom</text>
|
||||
<text x="800" y="32" fill="#385858" font-size="8">GitOps · Webhook</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ VERSION + LOGO ═══ -->
|
||||
<text x="1200" y="878" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-size="9" letter-spacing="0.5">v4.0 · Control Plane Architecture</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 42 KiB |
|
|
@ -1,565 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.orbit-flow { animation: orbit-dash 4s linear infinite; }
|
||||
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
|
||||
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
|
||||
.spoke { animation: spoke-dash 2s linear infinite; }
|
||||
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
|
||||
.https-beam { animation: https-p 4s ease-in-out infinite; }
|
||||
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
|
||||
.https-label { animation: https-lbl 4s ease-in-out infinite; }
|
||||
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
|
||||
|
||||
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
|
||||
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
|
||||
|
||||
.cred-dot { opacity: 0; }
|
||||
.db-flow { animation: db-dash 2.5s linear infinite; }
|
||||
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/><stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/><stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/><stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/><stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/><stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/><stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/><stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Animated gradient for infinity engine color cycling -->
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
|
||||
<path id="orbit-cw" d="M 640,185 A 135,135 0 1,1 640,455 A 135,135 0 1,1 640,185 Z" fill="none"/>
|
||||
<path id="orbit-ccw" d="M 640,185 A 135,135 0 1,0 640,455 A 135,135 0 1,0 640,185 Z" fill="none"/>
|
||||
|
||||
<path id="path-orch-vault" d="M 640,185 A 135,135 0 0,0 508,276" fill="none"/>
|
||||
<path id="path-vault-orch" d="M 508,276 A 135,135 0 0,1 640,185" fill="none"/>
|
||||
<path id="path-cli-orch" d="M 640,98 L 640,115" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Star field -->
|
||||
<g opacity="0.35">
|
||||
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
|
||||
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
|
||||
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
|
||||
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<text x="640" y="28" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="17" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="48" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="56" x2="770" y2="56" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
<!-- ═══ CLI ═══ -->
|
||||
<g>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="535" y="67" width="3" height="28" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
<circle cx="556" cy="78" r="7" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="556" y="81" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
|
||||
<text x="570" y="78" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
|
||||
<text x="548" y="92" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning create server</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- NATS ORBITAL RING SYSTEM -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Ring outer glow -->
|
||||
<circle cx="640" cy="320" r="138" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
|
||||
|
||||
<!-- Main orbit ring (flowing dashes) -->
|
||||
<circle cx="640" cy="320" r="135" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
|
||||
|
||||
<!-- ═══ INFINITY ENGINE (∞ dual-wheel perpetual motion from logo) ═══ -->
|
||||
<!-- Centered at (640,320), scale 0.55 from original logo coordinates -->
|
||||
<!-- Left wheel center: (115.86, 113.25) | Right wheel center: (261.91, 113.28) -->
|
||||
<g transform="translate(640, 320) scale(0.55) translate(-188.88, -113.27)" opacity="0.82">
|
||||
|
||||
<!-- Left wheel — clockwise 8s -->
|
||||
<g opacity="0.78">
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#7abde8; fill-rule:evenodd; stroke:#1a3050; stroke-miterlimit:10; stroke-width:0.8;">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
values="0 115.86 113.25;360 115.86 113.25" dur="8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel — counter-clockwise 6s -->
|
||||
<g opacity="0.78">
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#7abde8; fill-rule:evenodd; stroke:#1a3050; stroke-miterlimit:10; stroke-width:0.8;">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
values="0 261.91 113.28;-360 261.91 113.28" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel golden center -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff;"/>
|
||||
|
||||
<!-- Right wheel golden center -->
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224;"/>
|
||||
|
||||
<!-- Right wheel — dashboard display (simplified from logo chronometer) -->
|
||||
<circle cx="261.91" cy="113.28" r="26" style="fill:#3d5070; opacity:0.85;"/>
|
||||
<!-- Window controls (3 dots) -->
|
||||
<circle cx="243" cy="95" r="1.2" style="fill:#d68a87; opacity:0.6;"/>
|
||||
<circle cx="247" cy="95" r="1.2" style="fill:#c9a558; opacity:0.6;"/>
|
||||
<circle cx="251" cy="95" r="1.2" style="fill:#5a7093; opacity:0.6;"/>
|
||||
<!-- Terminal header bar -->
|
||||
<rect x="243" y="99" width="38" height="3.2" rx="1.5" style="fill:#6a7a98; opacity:0.5;"/>
|
||||
<!-- Status bars (staggered widths = data readout) -->
|
||||
<rect x="243" y="105" width="28" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.5;"/>
|
||||
<rect x="243" y="110" width="34" height="2.8" rx="1" style="fill:#a89870; opacity:0.5;"/>
|
||||
<rect x="243" y="115" width="20" height="2.8" rx="1" style="fill:#6a7a8a; opacity:0.4;"/>
|
||||
<rect x="243" y="120" width="30" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.4;"/>
|
||||
<!-- Green health indicator -->
|
||||
<circle cx="271" cy="127" r="5.5" style="fill:#4a9e8f; opacity:0.7;">
|
||||
<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Animated checkmark -->
|
||||
<path d="M268,126.5l2.5,2.5,4.2-4.2" style="fill:none; stroke:#a0c0b0; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:0.8;">
|
||||
<animate attributeName="stroke-dasharray" values="0 15;15 15" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- ∞ path segments — staggered color cycling -->
|
||||
|
||||
<!-- Top left of ∞ -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom left of ∞ -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Top right of ∞ -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom right of ∞ -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- ∞ connector arcs (static deep blue) -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#3a5a7a; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- ∞ transition pieces -->
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#5a7a90; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central flow — animated infinity gradient -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;3;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
</g>
|
||||
|
||||
<!-- Hub labels (below infinity engine) -->
|
||||
<text x="640" y="392" text-anchor="middle" fill="#c8d0dc" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="1.2">NATS</text>
|
||||
<text x="640" y="403" text-anchor="middle" fill="#8090a0" font-family="'IBM Plex Mono',monospace" font-size="8" letter-spacing="2">JETSTREAM</text>
|
||||
<text x="640" y="414" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="7">:4222</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SATELLITE SERVICES -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
|
||||
<g>
|
||||
<rect x="505" y="95" width="270" height="110" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="515" y="108" width="3" height="84" rx="1.5" fill="#f59e0b" opacity="0.5"/>
|
||||
<circle cx="537" cy="127" r="8" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="537" y="131" text-anchor="middle" fill="#f59e0b" font-size="9">▶</text>
|
||||
<text x="553" y="130" fill="#d8ccc0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Orchestrator</text>
|
||||
<text x="740" y="130" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
|
||||
<circle cx="752" cy="127" r="3.5" fill="#f59e0b" class="health"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#6b6050">
|
||||
<rect x="528" y="143" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="153" text-anchor="middle" opacity="0.9">Task State Machine • Provider API • SSH</text>
|
||||
<rect x="528" y="162" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="172" text-anchor="middle" opacity="0.85">Webhooks • Rollback • Audit Collector</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
|
||||
<g>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="996" y="203" width="3" height="104" rx="1.5" fill="#818cf8" opacity="0.5"/>
|
||||
<circle cx="772" cy="222" r="8" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="772" y="226" text-anchor="middle" fill="#818cf8" font-size="9">◯</text>
|
||||
<text x="788" y="225" fill="#c0c0d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Control Center</text>
|
||||
<text x="980" y="225" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
|
||||
<circle cx="992" cy="222" r="3.5" fill="#818cf8" class="health health-d1"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a5878">
|
||||
<rect x="763" y="238" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="248" text-anchor="middle" opacity="0.9">Cedar Policies • JWT • Sessions</text>
|
||||
<rect x="763" y="257" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="267" text-anchor="middle" opacity="0.85">WebSocket • RBAC • Solo: auto-session</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP (144°, lower-right) ─── -->
|
||||
<g>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="971" y="413" width="3" height="104" rx="1.5" fill="#22d3ee" opacity="0.5"/>
|
||||
<circle cx="747" cy="432" r="8" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="747" y="436" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
|
||||
<text x="763" y="435" fill="#c0d8d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">AI • MCP</text>
|
||||
<text x="960" y="435" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
|
||||
<circle cx="972" cy="432" r="3.5" fill="#22d3ee" class="health health-d2"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#385a58">
|
||||
<rect x="738" y="448" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="458" text-anchor="middle" opacity="0.9">RAG Engine • MCP Server • Tools</text>
|
||||
<rect x="738" y="467" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="477" text-anchor="middle" opacity="0.85">Embeddings • Model Routing • KGraph</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (216°, lower-left) ─── -->
|
||||
<g>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="305" y="413" width="3" height="104" rx="1.5" fill="#ef4444" opacity="0.5"/>
|
||||
<circle cx="327" cy="432" r="8" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="327" y="436" text-anchor="middle" fill="#ef4444" font-size="9">⚙</text>
|
||||
<text x="343" y="435" fill="#d8c0c8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">Ext Registry</text>
|
||||
<text x="530" y="435" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
|
||||
<circle cx="542" cy="432" r="3.5" fill="#ef4444" class="health health-d3"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3848">
|
||||
<rect x="318" y="448" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="458" text-anchor="middle" opacity="0.9">Gitea • Forgejo • OCI • LRU</text>
|
||||
<rect x="318" y="467" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="477" text-anchor="middle" opacity="0.85">Providers • Taskservs • vault:// creds</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
|
||||
<g>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="280" y="203" width="3" height="104" rx="1.5" fill="#ec4899" opacity="0.5"/>
|
||||
<circle cx="302" cy="222" r="8" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="302" y="226" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
|
||||
<text x="318" y="225" fill="#d8c0d0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Vault Service</text>
|
||||
<text x="510" y="225" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
|
||||
<circle cx="522" cy="222" r="3.5" fill="#ec4899" class="health health-d4"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3850">
|
||||
<rect x="293" y="238" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="248" text-anchor="middle" opacity="0.9">Lease Lifecycle • Key Management</text>
|
||||
<rect x="293" y="257" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="267" text-anchor="middle" opacity="0.85">SOPS • Age • Secrets never in NATS</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL BEAM ═══ -->
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="2" class="https-beam" filter="url(#glow-gold)"/>
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="495" y="200" fill="#fbbf24" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label" transform="rotate(-65,495,200)">HTTPS</text>
|
||||
|
||||
|
||||
<!-- ═══ ORBITAL PARTICLES ═══ -->
|
||||
|
||||
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
|
||||
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
|
||||
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CREDENTIAL FLOW ═══ -->
|
||||
|
||||
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
|
||||
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-orch-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#path-vault-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
|
||||
<g opacity="0.3">
|
||||
<line x1="640" y1="455" x2="640" y2="520" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="520" y1="430" x2="380" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="760" y1="430" x2="900" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SURREALDB ═══ -->
|
||||
|
||||
<g>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="url(#surreal-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="none" stroke="#2e2450" stroke-width="1"/>
|
||||
<rect x="120" y="568" width="1040" height="4" rx="2" fill="#a78bfa" opacity="0.2"/>
|
||||
|
||||
<text x="640" y="537" text-anchor="middle" fill="#c4b5e0" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">SURREALDB PERSISTENCE</text>
|
||||
<text x="1120" y="537" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.4">Solo: RocksDB • Multi: WebSocket</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="148" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="213" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">orchestrator</text>
|
||||
|
||||
<rect x="290" y="545" width="110" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="345" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">vault</text>
|
||||
|
||||
<rect x="412" y="545" width="140" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="482" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">control_center</text>
|
||||
|
||||
<rect x="564" y="545" width="90" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="609" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">audit</text>
|
||||
|
||||
<rect x="666" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="731" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">workspace</text>
|
||||
|
||||
<rect x="808" y="545" width="100" height="16" rx="3" fill="none" stroke="#2e2450" stroke-width="0.4"/>
|
||||
<text x="858" y="556" text-anchor="middle" fill="#5a4878" opacity="0.6">Nickel config</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SOLID ENFORCEMENT ═══ -->
|
||||
|
||||
<g transform="translate(120, 585)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="0" y="8" width="80" height="12" rx="3" fill="#f59e0b" opacity="0.06" stroke="#f59e0b" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="40" y="17" text-anchor="middle" fill="#f59e0b" opacity="0.6">Compile-time</text>
|
||||
<rect x="88" y="8" width="68" height="12" rx="3" fill="#818cf8" opacity="0.06" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="122" y="17" text-anchor="middle" fill="#818cf8" opacity="0.6">Dev-time</text>
|
||||
<rect x="164" y="8" width="74" height="12" rx="3" fill="#ec4899" opacity="0.06" stroke="#ec4899" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="201" y="17" text-anchor="middle" fill="#ec4899" opacity="0.6">Pre-commit</text>
|
||||
<rect x="246" y="8" width="50" height="12" rx="3" fill="#ef4444" opacity="0.06" stroke="#ef4444" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="271" y="17" text-anchor="middle" fill="#ef4444" opacity="0.6">CI/CD</text>
|
||||
<rect x="304" y="8" width="60" height="12" rx="3" fill="#22d3ee" opacity="0.06" stroke="#22d3ee" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="334" y="17" text-anchor="middle" fill="#22d3ee" opacity="0.6">Runtime</text>
|
||||
<rect x="372" y="8" width="50" height="12" rx="3" fill="#94a3b8" opacity="0.06" stroke="#94a3b8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="397" y="17" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#3a3e48" opacity="0.5">
|
||||
<text x="480" y="12">Provider APIs: Orchestrator only | SSH: Orchestrator + Machines</text>
|
||||
<text x="480" y="24">Auth: Control Center only | Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ LEGEND ═══ -->
|
||||
|
||||
<g transform="translate(120, 625)" font-family="'IBM Plex Mono',monospace" font-size="8">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">SERVICES</text>
|
||||
<circle cx="7" cy="12" r="3" fill="#f59e0b"/><text x="15" y="16" fill="#6b6050">Orchestrator</text>
|
||||
<circle cx="7" cy="24" r="3" fill="#818cf8"/><text x="15" y="28" fill="#5a5878">Control Center</text>
|
||||
<circle cx="7" cy="36" r="3" fill="#ec4899"/><text x="15" y="40" fill="#5a3850">Vault Service</text>
|
||||
<circle cx="7" cy="48" r="3" fill="#ef4444"/><text x="15" y="52" fill="#5a3848">Catalog Registry</text>
|
||||
<circle cx="7" cy="60" r="3" fill="#22d3ee"/><text x="15" y="64" fill="#385a58">AI • MCP</text>
|
||||
|
||||
<text x="340" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
<circle cx="348" cy="12" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<text x="360" y="16" fill="#5a6278">NATS Orbital Ring (:4222)</text>
|
||||
<line x1="340" y1="24" x2="354" y2="24" stroke="#a78bfa" stroke-width="1.5"/>
|
||||
<text x="360" y="28" fill="#5a4878">SurrealDB Persistence</text>
|
||||
<line x1="340" y1="36" x2="354" y2="36" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="360" y="40" fill="#6b6050">HTTPS Credentials</text>
|
||||
|
||||
<text x="700" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
<rect x="700" y="6" width="40" height="10" rx="2" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4"/>
|
||||
<text x="720" y="14" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="750" y="14" fill="#4a7a5a" font-size="7">RocksDB + local NATS + auto-session</text>
|
||||
<rect x="700" y="20" width="40" height="10" rx="2" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4"/>
|
||||
<text x="720" y="28" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="750" y="28" fill="#5a5878" font-size="7">WebSocket DB + NATS cluster + JWT+Cedar</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DEPLOYMENT ═══ -->
|
||||
|
||||
<g transform="translate(0, 750)" font-family="'IBM Plex Mono',monospace">
|
||||
<rect x="160" y="0" width="120" height="30" rx="6" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="174" cy="11" r="3" fill="#ef4444"/><text x="182" y="14" fill="#d0a0a0" font-size="8" font-weight="500">Production</text>
|
||||
<text x="174" y="26" fill="#5a3838" font-size="7" text-anchor="middle">Hetzner • AWS</text>
|
||||
|
||||
<rect x="300" y="0" width="120" height="30" rx="6" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="314" cy="11" r="3" fill="#f59e0b"/><text x="322" y="14" fill="#d0c0a0" font-size="8" font-weight="500">Staging</text>
|
||||
<text x="314" y="26" fill="#5a5038" font-size="7" text-anchor="middle">K8s cluster</text>
|
||||
|
||||
<rect x="440" y="0" width="120" height="30" rx="6" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="454" cy="11" r="3" fill="#34d399"/><text x="462" y="14" fill="#a0d0b8" font-size="8" font-weight="500">Dev</text>
|
||||
<text x="454" y="26" fill="#385a48" font-size="7" text-anchor="middle">Solo mode</text>
|
||||
|
||||
<rect x="580" y="0" width="120" height="30" rx="6" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="594" cy="11" r="3" fill="#818cf8"/><text x="602" y="14" fill="#b0b0d8" font-size="8" font-weight="500">Edge</text>
|
||||
<text x="594" y="26" fill="#48486a" font-size="7" text-anchor="middle">On-prem • IoT</text>
|
||||
|
||||
<rect x="720" y="0" width="120" height="30" rx="6" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="734" cy="11" r="3" fill="#22d3ee"/><text x="742" y="14" fill="#a0c8c8" font-size="8" font-weight="500">Custom</text>
|
||||
<text x="734" y="26" fill="#385858" font-size="7" text-anchor="middle">GitOps • Webhook</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ VERSION ═══ -->
|
||||
<text x="1180" y="880" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v5.0 • ∞ Engine Control Plane</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 38 KiB |
|
|
@ -1,519 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.orbit-flow { animation: orbit-dash 4s linear infinite; }
|
||||
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
|
||||
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
|
||||
.spoke { animation: spoke-dash 2s linear infinite; }
|
||||
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
|
||||
.https-beam { animation: https-p 4s ease-in-out infinite; }
|
||||
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
|
||||
.https-label { animation: https-lbl 4s ease-in-out infinite; }
|
||||
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
|
||||
|
||||
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
|
||||
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
|
||||
|
||||
.cred-dot { opacity: 0; }
|
||||
.db-flow { animation: db-dash 2.5s linear infinite; }
|
||||
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/><stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/><stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/><stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/><stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/><stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/><stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/><stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Animated gradient for infinity engine color cycling -->
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
|
||||
<path id="orbit-cw" d="M 640,185 A 135,135 0 1,1 640,455 A 135,135 0 1,1 640,185 Z" fill="none"/>
|
||||
<path id="orbit-ccw" d="M 640,185 A 135,135 0 1,0 640,455 A 135,135 0 1,0 640,185 Z" fill="none"/>
|
||||
|
||||
<path id="path-orch-vault" d="M 640,185 A 135,135 0 0,0 508,276" fill="none"/>
|
||||
<path id="path-vault-orch" d="M 508,276 A 135,135 0 0,1 640,185" fill="none"/>
|
||||
<path id="path-cli-orch" d="M 640,98 L 640,115" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Star field -->
|
||||
<g opacity="0.35">
|
||||
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
|
||||
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
|
||||
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
|
||||
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<text x="640" y="28" text-anchor="middle" fill="#e2e6ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="17" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="48" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="56" x2="770" y2="56" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
<!-- ═══ CLI ═══ -->
|
||||
<g>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="535" y="64" width="210" height="34" rx="8" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="535" y="67" width="3" height="28" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
<circle cx="556" cy="78" r="7" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="556" y="81" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
|
||||
<text x="570" y="78" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
|
||||
<text x="548" y="92" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning create server</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- NATS ORBITAL RING SYSTEM -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Ring outer glow -->
|
||||
<circle cx="640" cy="320" r="138" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
|
||||
|
||||
<!-- Main orbit ring (flowing dashes) -->
|
||||
<circle cx="640" cy="320" r="135" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
|
||||
|
||||
<!-- Inner engine ring (counter-rotating) -->
|
||||
<circle cx="640" cy="320" r="80" fill="none" stroke="#5a6278" stroke-width="1" stroke-dasharray="6 6" opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360 640 320" to="0 640 320" dur="15s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Smallest inner ring (clockwise) -->
|
||||
<circle cx="640" cy="320" r="45" fill="none" stroke="#3a4050" stroke-width="0.8" stroke-dasharray="4 4" opacity="0.2">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 640 320" to="360 640 320" dur="25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Hub center glow -->
|
||||
<circle cx="640" cy="320" r="40" fill="url(#hub-glow)" class="hub-pulse"/>
|
||||
|
||||
<!-- ═══ INFINITE ENGINE COGS (perpetual motion at NATS hub core) ═══ -->
|
||||
|
||||
<!-- Outer gear ring — 6 teeth, slow clockwise 20s -->
|
||||
<g opacity="0.55">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
from="0 640 320" to="360 640 320" dur="20s"
|
||||
repeatCount="indefinite"/>
|
||||
<circle cx="640" cy="320" r="120" fill="none" stroke="#94a3b8" stroke-width="4"
|
||||
stroke-dasharray="30 30"/>
|
||||
<line x1="640" y1="200" x2="640" y2="180" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="703.9" y1="260" x2="721" y2="248" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="703.9" y1="380" x2="721" y2="392" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="640" y1="440" x2="640" y2="460" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="576.1" y1="380" x2="559" y2="392" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="576.1" y1="260" x2="559" y2="248" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Inner gear ring — 4 spokes, faster counter-clockwise 12s -->
|
||||
<g opacity="0.62">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
from="360 640 320" to="0 640 320" dur="12s"
|
||||
repeatCount="indefinite"/>
|
||||
<circle cx="640" cy="320" r="70" fill="none" stroke="#c8d0dc" stroke-width="3"
|
||||
stroke-dasharray="20 20"/>
|
||||
<line x1="640" y1="250" x2="640" y2="228" stroke="#c8d0dc" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<line x1="710" y1="320" x2="732" y2="320" stroke="#c8d0dc" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<line x1="640" y1="390" x2="640" y2="412" stroke="#c8d0dc" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<line x1="570" y1="320" x2="548" y2="320" stroke="#c8d0dc" stroke-width="4.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Engine core — breathing pulse 3s -->
|
||||
<circle cx="640" cy="320" r="15" fill="#c8d0dc" class="hub-pulse" opacity="0.5"/>
|
||||
|
||||
<!-- Hub labels (below cogs) -->
|
||||
<text x="640" y="352" text-anchor="middle" fill="#c8d0dc" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="1.2">NATS</text>
|
||||
<text x="640" y="366" text-anchor="middle" fill="#8090a0" font-family="'IBM Plex Mono',monospace" font-size="8" letter-spacing="2">JETSTREAM</text>
|
||||
<text x="640" y="378" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="7">:4222</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SATELLITE SERVICES -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
|
||||
<g>
|
||||
<rect x="505" y="95" width="270" height="110" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="515" y="105" width="250" height="90" rx="10" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="515" y="108" width="3" height="84" rx="1.5" fill="#f59e0b" opacity="0.5"/>
|
||||
<circle cx="537" cy="127" r="8" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="537" y="131" text-anchor="middle" fill="#f59e0b" font-size="9">▶</text>
|
||||
<text x="553" y="130" fill="#d8ccc0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Orchestrator</text>
|
||||
<text x="740" y="130" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
|
||||
<circle cx="752" cy="127" r="3.5" fill="#f59e0b" class="health"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#6b6050">
|
||||
<rect x="528" y="143" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="153" text-anchor="middle" opacity="0.9">Task State Machine • Provider API • SSH</text>
|
||||
<rect x="528" y="162" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="172" text-anchor="middle" opacity="0.85">Webhooks • Rollback • Audit Collector</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
|
||||
<g>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="750" y="200" width="250" height="110" rx="10" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="996" y="203" width="3" height="104" rx="1.5" fill="#818cf8" opacity="0.5"/>
|
||||
<circle cx="772" cy="222" r="8" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="772" y="226" text-anchor="middle" fill="#818cf8" font-size="9">◯</text>
|
||||
<text x="788" y="225" fill="#c0c0d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Control Center</text>
|
||||
<text x="980" y="225" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
|
||||
<circle cx="992" cy="222" r="3.5" fill="#818cf8" class="health health-d1"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a5878">
|
||||
<rect x="763" y="238" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="248" text-anchor="middle" opacity="0.9">Cedar Policies • JWT • Sessions</text>
|
||||
<rect x="763" y="257" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="873" y="267" text-anchor="middle" opacity="0.85">WebSocket • RBAC • Solo: auto-session</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP (144°, lower-right) ─── -->
|
||||
<g>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="725" y="410" width="250" height="110" rx="10" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="971" y="413" width="3" height="104" rx="1.5" fill="#22d3ee" opacity="0.5"/>
|
||||
<circle cx="747" cy="432" r="8" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="747" y="436" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
|
||||
<text x="763" y="435" fill="#c0d8d8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">AI • MCP</text>
|
||||
<text x="960" y="435" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
|
||||
<circle cx="972" cy="432" r="3.5" fill="#22d3ee" class="health health-d2"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#385a58">
|
||||
<rect x="738" y="448" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="458" text-anchor="middle" opacity="0.9">RAG Engine • MCP Server • Tools</text>
|
||||
<rect x="738" y="467" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="848" y="477" text-anchor="middle" opacity="0.85">Embeddings • Model Routing • KGraph</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (216°, lower-left) ─── -->
|
||||
<g>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="305" y="410" width="250" height="110" rx="10" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="305" y="413" width="3" height="104" rx="1.5" fill="#ef4444" opacity="0.5"/>
|
||||
<circle cx="327" cy="432" r="8" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="327" y="436" text-anchor="middle" fill="#ef4444" font-size="9">⚙</text>
|
||||
<text x="343" y="435" fill="#d8c0c8" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11" letter-spacing="0.5">Ext Registry</text>
|
||||
<text x="530" y="435" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
|
||||
<circle cx="542" cy="432" r="3.5" fill="#ef4444" class="health health-d3"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3848">
|
||||
<rect x="318" y="448" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="458" text-anchor="middle" opacity="0.9">Gitea • Forgejo • OCI • LRU</text>
|
||||
<rect x="318" y="467" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="428" y="477" text-anchor="middle" opacity="0.85">Providers • Taskservs • vault:// creds</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
|
||||
<g>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="280" y="200" width="250" height="110" rx="10" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="280" y="203" width="3" height="104" rx="1.5" fill="#ec4899" opacity="0.5"/>
|
||||
<circle cx="302" cy="222" r="8" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="302" y="226" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
|
||||
<text x="318" y="225" fill="#d8c0d0" font-family="'DM Sans',sans-serif" font-weight="600" font-size="12" letter-spacing="0.5">Vault Service</text>
|
||||
<text x="510" y="225" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
|
||||
<circle cx="522" cy="222" r="3.5" fill="#ec4899" class="health health-d4"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3850">
|
||||
<rect x="293" y="238" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="248" text-anchor="middle" opacity="0.9">Lease Lifecycle • Key Management</text>
|
||||
<rect x="293" y="257" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="403" y="267" text-anchor="middle" opacity="0.85">SOPS • Age • Secrets never in NATS</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL BEAM ═══ -->
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="2" class="https-beam" filter="url(#glow-gold)"/>
|
||||
<line x1="480" y1="250" x2="560" y2="160" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="495" y="200" fill="#fbbf24" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label" transform="rotate(-65,495,200)">HTTPS</text>
|
||||
|
||||
|
||||
<!-- ═══ ORBITAL PARTICLES ═══ -->
|
||||
|
||||
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
|
||||
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
|
||||
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CREDENTIAL FLOW ═══ -->
|
||||
|
||||
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
|
||||
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-orch-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#path-vault-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
|
||||
<g opacity="0.3">
|
||||
<line x1="640" y1="455" x2="640" y2="520" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="520" y1="430" x2="380" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="760" y1="430" x2="900" y2="520" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SURREALDB ═══ -->
|
||||
|
||||
<g>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="url(#surreal-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="522" width="1040" height="50" rx="8" fill="none" stroke="#2e2450" stroke-width="1"/>
|
||||
<rect x="120" y="568" width="1040" height="4" rx="2" fill="#a78bfa" opacity="0.2"/>
|
||||
|
||||
<text x="640" y="537" text-anchor="middle" fill="#c4b5e0" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">SURREALDB PERSISTENCE</text>
|
||||
<text x="1120" y="537" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.4">Solo: RocksDB • Multi: WebSocket</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="148" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="213" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">orchestrator</text>
|
||||
|
||||
<rect x="290" y="545" width="110" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="345" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">vault</text>
|
||||
|
||||
<rect x="412" y="545" width="140" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="482" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">control_center</text>
|
||||
|
||||
<rect x="564" y="545" width="90" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="609" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">audit</text>
|
||||
|
||||
<rect x="666" y="545" width="130" height="16" rx="3" fill="#110e1c" stroke="#2e2450" stroke-width="0.5"/>
|
||||
<text x="731" y="556" text-anchor="middle" fill="#a78bfa" opacity="0.8">workspace</text>
|
||||
|
||||
<rect x="808" y="545" width="100" height="16" rx="3" fill="none" stroke="#2e2450" stroke-width="0.4"/>
|
||||
<text x="858" y="556" text-anchor="middle" fill="#5a4878" opacity="0.6">Nickel config</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SOLID ENFORCEMENT ═══ -->
|
||||
|
||||
<g transform="translate(120, 585)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="0" y="8" width="80" height="12" rx="3" fill="#f59e0b" opacity="0.06" stroke="#f59e0b" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="40" y="17" text-anchor="middle" fill="#f59e0b" opacity="0.6">Compile-time</text>
|
||||
<rect x="88" y="8" width="68" height="12" rx="3" fill="#818cf8" opacity="0.06" stroke="#818cf8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="122" y="17" text-anchor="middle" fill="#818cf8" opacity="0.6">Dev-time</text>
|
||||
<rect x="164" y="8" width="74" height="12" rx="3" fill="#ec4899" opacity="0.06" stroke="#ec4899" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="201" y="17" text-anchor="middle" fill="#ec4899" opacity="0.6">Pre-commit</text>
|
||||
<rect x="246" y="8" width="50" height="12" rx="3" fill="#ef4444" opacity="0.06" stroke="#ef4444" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="271" y="17" text-anchor="middle" fill="#ef4444" opacity="0.6">CI/CD</text>
|
||||
<rect x="304" y="8" width="60" height="12" rx="3" fill="#22d3ee" opacity="0.06" stroke="#22d3ee" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="334" y="17" text-anchor="middle" fill="#22d3ee" opacity="0.6">Runtime</text>
|
||||
<rect x="372" y="8" width="50" height="12" rx="3" fill="#94a3b8" opacity="0.06" stroke="#94a3b8" stroke-width="0.4" stroke-opacity="0.2"/>
|
||||
<text x="397" y="17" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#3a3e48" opacity="0.5">
|
||||
<text x="480" y="12">Provider APIs: Orchestrator only | SSH: Orchestrator + Machines</text>
|
||||
<text x="480" y="24">Auth: Control Center only | Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ LEGEND ═══ -->
|
||||
|
||||
<g transform="translate(120, 625)" font-family="'IBM Plex Mono',monospace" font-size="8">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">SERVICES</text>
|
||||
<circle cx="7" cy="12" r="3" fill="#f59e0b"/><text x="15" y="16" fill="#6b6050">Orchestrator</text>
|
||||
<circle cx="7" cy="24" r="3" fill="#818cf8"/><text x="15" y="28" fill="#5a5878">Control Center</text>
|
||||
<circle cx="7" cy="36" r="3" fill="#ec4899"/><text x="15" y="40" fill="#5a3850">Vault Service</text>
|
||||
<circle cx="7" cy="48" r="3" fill="#ef4444"/><text x="15" y="52" fill="#5a3848">Catalog Registry</text>
|
||||
<circle cx="7" cy="60" r="3" fill="#22d3ee"/><text x="15" y="64" fill="#385a58">AI • MCP</text>
|
||||
|
||||
<text x="340" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
<circle cx="348" cy="12" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<text x="360" y="16" fill="#5a6278">NATS Orbital Ring (:4222)</text>
|
||||
<line x1="340" y1="24" x2="354" y2="24" stroke="#a78bfa" stroke-width="1.5"/>
|
||||
<text x="360" y="28" fill="#5a4878">SurrealDB Persistence</text>
|
||||
<line x1="340" y1="36" x2="354" y2="36" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="360" y="40" fill="#6b6050">HTTPS Credentials</text>
|
||||
|
||||
<text x="700" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
<rect x="700" y="6" width="40" height="10" rx="2" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4"/>
|
||||
<text x="720" y="14" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="750" y="14" fill="#4a7a5a" font-size="7">RocksDB + local NATS + auto-session</text>
|
||||
<rect x="700" y="20" width="40" height="10" rx="2" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4"/>
|
||||
<text x="720" y="28" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="750" y="28" fill="#5a5878" font-size="7">WebSocket DB + NATS cluster + JWT+Cedar</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DEPLOYMENT ═══ -->
|
||||
|
||||
<g transform="translate(0, 750)" font-family="'IBM Plex Mono',monospace">
|
||||
<rect x="160" y="0" width="120" height="30" rx="6" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="174" cy="11" r="3" fill="#ef4444"/><text x="182" y="14" fill="#d0a0a0" font-size="8" font-weight="500">Production</text>
|
||||
<text x="174" y="26" fill="#5a3838" font-size="7" text-anchor="middle">Hetzner • AWS</text>
|
||||
|
||||
<rect x="300" y="0" width="120" height="30" rx="6" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="314" cy="11" r="3" fill="#f59e0b"/><text x="322" y="14" fill="#d0c0a0" font-size="8" font-weight="500">Staging</text>
|
||||
<text x="314" y="26" fill="#5a5038" font-size="7" text-anchor="middle">K8s cluster</text>
|
||||
|
||||
<rect x="440" y="0" width="120" height="30" rx="6" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="454" cy="11" r="3" fill="#34d399"/><text x="462" y="14" fill="#a0d0b8" font-size="8" font-weight="500">Dev</text>
|
||||
<text x="454" y="26" fill="#385a48" font-size="7" text-anchor="middle">Solo mode</text>
|
||||
|
||||
<rect x="580" y="0" width="120" height="30" rx="6" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="594" cy="11" r="3" fill="#818cf8"/><text x="602" y="14" fill="#b0b0d8" font-size="8" font-weight="500">Edge</text>
|
||||
<text x="594" y="26" fill="#48486a" font-size="7" text-anchor="middle">On-prem • IoT</text>
|
||||
|
||||
<rect x="720" y="0" width="120" height="30" rx="6" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="734" cy="11" r="3" fill="#22d3ee"/><text x="742" y="14" fill="#a0c8c8" font-size="8" font-weight="500">Custom</text>
|
||||
<text x="734" y="26" fill="#385858" font-size="7" text-anchor="middle">GitOps • Webhook</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ VERSION ═══ -->
|
||||
<text x="1180" y="880" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v4.0 • Orbital Control Plane</text>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 33 KiB |
|
|
@ -1,639 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.orbit-flow { animation: orbit-dash 4s linear infinite; }
|
||||
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
|
||||
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
|
||||
.spoke { animation: spoke-dash 2s linear infinite; }
|
||||
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
|
||||
|
||||
.health { animation: pulse 2.2s ease-in-out infinite; }
|
||||
.health-d1 { animation-delay: 0.4s; }
|
||||
.health-d2 { animation-delay: 0.8s; }
|
||||
.health-d3 { animation-delay: 1.2s; }
|
||||
.health-d4 { animation-delay: 1.6s; }
|
||||
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
|
||||
|
||||
.https-beam { animation: https-p 4s ease-in-out infinite; }
|
||||
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
|
||||
.https-label { animation: https-lbl 4s ease-in-out infinite; }
|
||||
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
|
||||
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
|
||||
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
|
||||
|
||||
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
|
||||
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
|
||||
|
||||
.cred-dot { opacity: 0; }
|
||||
.db-flow { animation: db-dash 2.5s linear infinite; }
|
||||
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/><stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/><stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/><stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/><stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/><stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1428"/><stop offset="100%" stop-color="#110e1c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a2a42"/><stop offset="100%" stop-color="#0f1a2e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Animated gradient for infinity engine color cycling -->
|
||||
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
|
||||
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="3s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
|
||||
</marker>
|
||||
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
|
||||
</marker>
|
||||
<marker id="arr-green" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#10b981"/>
|
||||
</marker>
|
||||
<marker id="arr-green-sm" markerWidth="5" markerHeight="4" refX="5" refY="2" orient="auto">
|
||||
<polygon points="0 0, 5 2, 0 4" fill="#10b981"/>
|
||||
</marker>
|
||||
|
||||
<path id="orbit-cw" d="M 640,185 A 135,135 0 1,1 640,455 A 135,135 0 1,1 640,185 Z" fill="none"/>
|
||||
<path id="orbit-ccw" d="M 640,185 A 135,135 0 1,0 640,455 A 135,135 0 1,0 640,185 Z" fill="none"/>
|
||||
|
||||
<path id="path-orch-vault" d="M 640,185 A 135,135 0 0,0 508,276" fill="none"/>
|
||||
<path id="path-vault-orch" d="M 508,276 A 135,135 0 0,1 640,185" fill="none"/>
|
||||
<path id="path-cli-orch" d="M 660,98 L 660,115" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══ BACKGROUND ═══ -->
|
||||
<rect width="1280" height="900" fill="url(#bg-radial)"/>
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#fff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Star field -->
|
||||
<g opacity="0.35">
|
||||
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
|
||||
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
|
||||
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
|
||||
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TITLE ═══ -->
|
||||
<image x="436" y="6" width="408" height="44" href="../images/provisioning_logo-text-dark.svg"/>
|
||||
<text x="640" y="48" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
|
||||
<line x1="510" y1="56" x2="770" y2="56" stroke="#333" stroke-width="0.8"/>
|
||||
|
||||
<!-- ═══ CLI ═══ -->
|
||||
<g>
|
||||
<rect x="235" y="104" width="140" height="68" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="235" y="104" width="140" height="68" rx="8" fill="none" stroke="#1c2a3a" stroke-width="1"/>
|
||||
<rect x="235" y="107" width="3" height="62" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
<circle cx="256" cy="118" r="7" fill="#2d3748" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="256" y="121" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
|
||||
<text x="265" y="123" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
|
||||
<text x="270" y="148" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow: CLI → Orchestrator -->
|
||||
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- NATS ORBITAL RING SYSTEM -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Ring outer glow -->
|
||||
<circle cx="640" cy="320" r="138" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
|
||||
|
||||
<!-- Main orbit ring (flowing dashes) -->
|
||||
<circle cx="640" cy="320" r="135" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
|
||||
|
||||
<!-- ═══ INFINITY ENGINE (∞ dual-wheel perpetual motion from logo) ═══ -->
|
||||
<!-- Centered at (640,310), scale 0.55 from original logo coordinates -->
|
||||
<!-- Left wheel center: (115.86, 113.25) | Right wheel center: (261.91, 113.28) -->
|
||||
<g transform="translate(640, 310) scale(0.55) translate(-188.88, -113.27)" opacity="0.85">
|
||||
|
||||
<!-- Background circle with CLI gradient -->
|
||||
<rect x="100" y="40" width="178" height="146" rx="12" style="fill:url(#cli-grad); opacity:0.35;"/>
|
||||
<circle cx="188.88" cy="113.27" r="50" style="fill:url(#cli-grad); opacity:0.3;"/>
|
||||
|
||||
<!-- Left wheel — clockwise 8s (outline only) -->
|
||||
<g>
|
||||
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:none; fill-rule:evenodd; stroke:#4cc2f1; stroke-miterlimit:10; stroke-width:1.2; opacity:0.85;">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
values="0 115.86 113.25;360 115.86 113.25" dur="8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Right wheel — counter-clockwise 6s (outline only) -->
|
||||
<g>
|
||||
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:none; fill-rule:evenodd; stroke:#4cc2f1; stroke-miterlimit:10; stroke-width:1.2; opacity:0.85;">
|
||||
<animateTransform attributeName="transform" type="rotate"
|
||||
values="0 261.91 113.28;-360 261.91 113.28" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Left wheel golden center (strong original colors) -->
|
||||
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f; opacity:0.9;"/>
|
||||
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px; opacity:0.8;"/>
|
||||
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff; opacity:0.8;"/>
|
||||
|
||||
<!-- Right wheel golden center (strong original colors) -->
|
||||
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224; opacity:0.9;"/>
|
||||
|
||||
<!-- Right wheel — dashboard display (simplified from logo chronometer) -->
|
||||
<circle cx="261.91" cy="113.28" r="26" style="fill:#3d5070; opacity:0.85;"/>
|
||||
<!-- Window controls (3 dots) -->
|
||||
<circle cx="243" cy="95" r="1.2" style="fill:#d68a87; opacity:0.6;"/>
|
||||
<circle cx="247" cy="95" r="1.2" style="fill:#c9a558; opacity:0.6;"/>
|
||||
<circle cx="251" cy="95" r="1.2" style="fill:#5a7093; opacity:0.6;"/>
|
||||
<!-- Terminal header bar -->
|
||||
<rect x="243" y="99" width="38" height="3.2" rx="1.5" style="fill:#6a7a98; opacity:0.5;"/>
|
||||
<!-- Status bars (staggered widths = data readout) -->
|
||||
<rect x="243" y="105" width="28" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.5;"/>
|
||||
<rect x="243" y="110" width="34" height="2.8" rx="1" style="fill:#a89870; opacity:0.5;"/>
|
||||
<rect x="243" y="115" width="20" height="2.8" rx="1" style="fill:#6a7a8a; opacity:0.4;"/>
|
||||
<rect x="243" y="120" width="30" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.4;"/>
|
||||
<!-- Green health indicator -->
|
||||
<circle cx="271" cy="127" r="5.5" style="fill:#4a9e8f; opacity:0.7;">
|
||||
<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Animated checkmark -->
|
||||
<path d="M268,126.5l2.5,2.5,4.2-4.2" style="fill:none; stroke:#a0c0b0; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:0.8;">
|
||||
<animate attributeName="stroke-dasharray" values="0 15;15 15" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- ∞ path segments — staggered color cycling -->
|
||||
|
||||
<!-- Top left of ∞ -->
|
||||
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom left of ∞ -->
|
||||
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Top right of ∞ -->
|
||||
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- Bottom right of ∞ -->
|
||||
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- ∞ connector arcs (static deep blue) -->
|
||||
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#3a5a7a; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- ∞ transition pieces -->
|
||||
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#5a7a90; stroke-miterlimit:10;"/>
|
||||
|
||||
<!-- Central flow — animated infinity gradient -->
|
||||
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
|
||||
<animate attributeName="fill" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="0.5;3;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
</g>
|
||||
|
||||
<!-- Hub labels (below infinity engine) -->
|
||||
<text x="640" y="403" text-anchor="middle" fill="#94a3b8" font-family="'DM Sans',sans-serif" font-weight="700" font-size="15" letter-spacing="1.2" opacity="0.7">Events Stream</text>
|
||||
<text x="640" y="429" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="7">NATS JetStream</text>
|
||||
<text x="640" y="440" text-anchor="middle" fill="#5a6278" font-family="'IBM Plex Mono',monospace" font-size="7">:4222</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SATELLITE SERVICES -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
|
||||
<g>
|
||||
<rect x="505" y="67" width="270" height="110" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
|
||||
<rect x="515" y="77" width="250" height="90" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="515" y="77" width="250" height="90" rx="10" fill="none" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<rect x="515" y="80" width="3" height="84" rx="1.5" fill="#f59e0b" opacity="0.5"/>
|
||||
<circle cx="535" cy="99" r="8" fill="#2d3748" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
|
||||
<text x="535" y="103" text-anchor="middle" fill="#f59e0b" font-size="9">▶</text>
|
||||
<text x="553" y="102" fill="#f59e0b" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Orchestrator</text>
|
||||
<text x="740" y="102" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
|
||||
<circle cx="752" cy="99" r="3.5" fill="#f59e0b" class="health"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#a8a8a8">
|
||||
<rect x="528" y="120" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="130" text-anchor="middle" opacity="0.6">Task State Machine • Provider API • SSH</text>
|
||||
<rect x="528" y="144" width="220" height="14" rx="4" fill="#1a150f" stroke="#3a2e1c" stroke-width="0.5"/>
|
||||
<text x="638" y="154" text-anchor="middle" opacity="0.55">Webhooks • Rollback • Audit Collector</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── CONFIGURATION (top-right, cylinder) ─── -->
|
||||
<g>
|
||||
<rect x="920" y="95" width="140" height="61" rx="3" fill="#10b981" stroke="#10b981" stroke-width="1" stroke-dasharray="4 2" opacity="0.04" filter="url(#soft-shadow)"/>
|
||||
<ellipse cx="990" cy="95" rx="70" ry="13" fill="#10b981" opacity="0.2" stroke="#10b981" stroke-width="1" stroke-dasharray="4 2"/>
|
||||
<ellipse cx="990" cy="156" rx="70" ry="11" fill="#10b981" opacity="0.3" stroke="#10b981" stroke-width="1" stroke-dasharray="4 2"/>
|
||||
<text x="990" y="130" text-anchor="middle" fill="#10b981" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">Configuration</text>
|
||||
<text x="990" y="157" text-anchor="middle" fill="#10b981" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.6">Nickel</text>
|
||||
</g>
|
||||
|
||||
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
|
||||
<g>
|
||||
<rect x="252" y="248" width="250" height="110" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="252" y="248" width="250" height="110" rx="10" fill="none" stroke="#2e2848" stroke-width="1"/>
|
||||
<rect x="252" y="251" width="3" height="104" rx="1.5" fill="#818cf8" opacity="0.5"/>
|
||||
<circle cx="274" cy="270" r="8" fill="#2d3748" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="274" y="274" text-anchor="middle" fill="#818cf8" font-size="9">◯</text>
|
||||
<text x="290" y="273" fill="#818cf8" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Control Center</text>
|
||||
<text x="472" y="273" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
|
||||
<circle cx="484" cy="270" r="3.5" fill="#818cf8" class="health health-d1"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a5878">
|
||||
<rect x="265" y="301" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="375" y="311" text-anchor="middle" opacity="0.9">Cedar Policies • JWT • Sessions</text>
|
||||
<rect x="265" y="325" width="220" height="14" rx="4" fill="#110f1e" stroke="#2e2848" stroke-width="0.5"/>
|
||||
<text x="375" y="335" text-anchor="middle" opacity="0.85">WebSocket • RBAC • Solo: auto-session</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── EXTENSION REGISTRY (144°, lower-right) ─── -->
|
||||
<g>
|
||||
<rect x="725" y="425" width="250" height="110" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="725" y="425" width="250" height="110" rx="10" fill="none" stroke="#3a1c28" stroke-width="1"/>
|
||||
<rect x="971" y="428" width="3" height="104" rx="1.5" fill="#ef4444" opacity="0.5"/>
|
||||
<circle cx="747" cy="447" r="8" fill="#2d3748" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="747" y="451" text-anchor="middle" fill="#ef4444" font-size="9">⚙</text>
|
||||
<text x="763" y="450" fill="#ef4444" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">Ext Registry</text>
|
||||
<text x="945" y="450" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
|
||||
<circle cx="957" cy="447" r="3.5" fill="#ef4444" class="health health-d3"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3848">
|
||||
<rect x="738" y="478" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="848" y="488" text-anchor="middle" opacity="0.9">Gitea • Forgejo • OCI • LRU</text>
|
||||
<rect x="738" y="502" width="220" height="14" rx="4" fill="#1a0f14" stroke="#3a1c28" stroke-width="0.5"/>
|
||||
<text x="848" y="512" text-anchor="middle" opacity="0.85">Providers • Taskservs • vault:// creds</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── AI/MCP (216°, lower-left) ─── -->
|
||||
<g>
|
||||
<rect x="305" y="425" width="250" height="110" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="305" y="425" width="250" height="110" rx="10" fill="none" stroke="#1c3038" stroke-width="1"/>
|
||||
<rect x="305" y="428" width="3" height="104" rx="1.5" fill="#22d3ee" opacity="0.5"/>
|
||||
<circle cx="327" cy="447" r="8" fill="#2d3748" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="327" y="451" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
|
||||
<text x="343" y="450" fill="#22d3ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">AI • MCP</text>
|
||||
<text x="530" y="450" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
|
||||
<circle cx="542" cy="447" r="3.5" fill="#22d3ee" class="health health-d2"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#385a58">
|
||||
<rect x="318" y="478" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="428" y="488" text-anchor="middle" opacity="0.9">RAG Engine • MCP Server • Tools</text>
|
||||
<rect x="318" y="502" width="220" height="14" rx="4" fill="#0a1c1e" stroke="#1c3038" stroke-width="0.5"/>
|
||||
<text x="428" y="512" text-anchor="middle" opacity="0.85">Embeddings • Model Routing • KGraph</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
|
||||
<g>
|
||||
<rect x="778" y="248" width="250" height="110" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
|
||||
<rect x="778" y="248" width="250" height="110" rx="10" fill="none" stroke="#3a1c30" stroke-width="1"/>
|
||||
<rect x="1024" y="251" width="3" height="104" rx="1.5" fill="#ec4899" opacity="0.5"/>
|
||||
<circle cx="800" cy="270" r="8" fill="#2d3748" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
|
||||
<text x="800" y="274" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
|
||||
<text x="816" y="273" fill="#ec4899" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Vault Service</text>
|
||||
<text x="998" y="273" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
|
||||
<circle cx="1010" cy="270" r="3.5" fill="#ec4899" class="health health-d4"/>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#5a3850">
|
||||
<rect x="791" y="301" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="901" y="311" text-anchor="middle" opacity="0.9">Lease Lifecycle • Key Management</text>
|
||||
<rect x="791" y="325" width="220" height="14" rx="4" fill="#1a0f1e" stroke="#3a1c30" stroke-width="0.5"/>
|
||||
<text x="901" y="335" text-anchor="middle" opacity="0.85">SOPS • Age • Secrets never in NATS</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ VERTICAL ARROW: CONFIGURATION → VAULT ═══ -->
|
||||
<line x1="995" y1="169" x2="995" y2="248" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.35" marker-end="url(#arr-green-sm)"/>
|
||||
|
||||
<!-- ═══ VERTICAL ARROW: CLI → CONTROL CENTER ═══ -->
|
||||
<line x1="305" y1="177" x2="305" y2="248" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.35" marker-end="url(#arr-green-sm)"/>
|
||||
|
||||
<!-- ═══ CLI → ORCHESTRATOR CURVE ═══ -->
|
||||
<path d="M 375 138 C 430 100 480 80 505 120" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
|
||||
|
||||
<!-- ═══ CONFIGURATION → ORCHESTRATOR CURVE ═══ -->
|
||||
<path d="M 920 128 C 850 90 800 70 775 120" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
|
||||
|
||||
<!-- ═══ CLI → AI CURVE ═══ -->
|
||||
<path d="M 235 138 C 150 250 200 350 305 450" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
|
||||
|
||||
<!-- ═══ CONFIGURATION → EXT CURVE ═══ -->
|
||||
<path d="M 1060 128 C 1145 240 1095 340 975 450" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
|
||||
|
||||
<!-- ═══ HTTPS CREDENTIAL BEAM ═══ -->
|
||||
<path d="M 505 174 C 450 187 420 217 447 245" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
|
||||
<path d="M 505 174 C 450 187 420 217 447 245" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<path d="M 447 245 C 420 217 450 187 505 174" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
|
||||
<path d="M 447 245 C 420 217 450 187 505 174" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="475" y="209" fill="#4a9eff" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label">HTTPS</text>
|
||||
<path d="M 775 174 C 830 187 860 217 833 245" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
|
||||
<path d="M 775 174 C 830 187 860 217 833 245" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<path d="M 833 245 C 860 217 830 187 775 174" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
|
||||
<path d="M 833 245 C 860 217 830 187 775 174" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
|
||||
<text x="803" y="209" fill="#4a9eff" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label">HTTPS</text>
|
||||
|
||||
|
||||
<!-- ═══ ORBITAL PARTICLES ═══ -->
|
||||
|
||||
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
|
||||
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
|
||||
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-ccw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
|
||||
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
|
||||
<mpath href="#orbit-cw"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CREDENTIAL FLOW ═══ -->
|
||||
|
||||
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
|
||||
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-orch-vault"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
|
||||
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
|
||||
<mpath href="#path-vault-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
|
||||
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
|
||||
<mpath href="#path-cli-orch"/>
|
||||
</animateMotion>
|
||||
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
|
||||
<!-- ═══ CONFIGURATION CYLINDER EDGES ═══ -->
|
||||
<line x1="920" y1="95" x2="920" y2="156" stroke="#10b981" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
|
||||
<line x1="1060" y1="95" x2="1060" y2="156" stroke="#10b981" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
|
||||
|
||||
<!-- ═══ DATA PERSISTENCE CYLINDER EDGES ═══ -->
|
||||
<line x1="210" y1="582" x2="210" y2="669" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
|
||||
<line x1="1070" y1="582" x2="1070" y2="669" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
|
||||
|
||||
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
|
||||
<g opacity="0.3">
|
||||
<line x1="640" y1="460" x2="640" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="430" y1="535" x2="430" y2="575" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<line x1="850" y1="535" x2="850" y2="575" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<path d="M 377 358 C 280 370 230 480 240 580" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<path d="M 903 358 C 1000 370 1050 480 1040 580" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<path d="M 1060 128 C 1195 270 1145 410 1070 580" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
<path d="M 235 138 C 100 280 150 420 210 582" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DATA PERSISTENCE ═══ -->
|
||||
|
||||
<g>
|
||||
<ellipse cx="640" cy="582" rx="430" ry="12" fill="#a78bfa" opacity="0.15" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 2"/>
|
||||
<rect x="210" y="582" width="860" height="87" rx="8" fill="url(#surreal-grad)" stroke="none" opacity="0.04" filter="url(#soft-shadow)"/>
|
||||
<ellipse cx="640" cy="669" rx="430" ry="10" fill="#a78bfa" opacity="0.3" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 2"/>
|
||||
|
||||
<text x="640" y="615" text-anchor="middle" fill="#a78bfa" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">DATA PERSISTENCE</text>
|
||||
<text x="1055" y="607" text-anchor="end" fill="#a78bfa" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.4">Solo: RocksDB • Multi: WebSocket</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="248" y="630" width="130" height="16" rx="3" fill="#f59e0b" stroke="#f59e0b" stroke-width="0.8" opacity="0.15"/>
|
||||
<text x="313" y="641" text-anchor="middle" fill="#f59e0b" opacity="0.9">orchestrator</text>
|
||||
|
||||
<rect x="390" y="630" width="110" height="16" rx="3" fill="#ec4899" stroke="#ec4899" stroke-width="0.8" opacity="0.15"/>
|
||||
<text x="445" y="641" text-anchor="middle" fill="#ec4899" opacity="0.9">vault</text>
|
||||
|
||||
<rect x="512" y="630" width="140" height="16" rx="3" fill="#818cf8" stroke="#818cf8" stroke-width="0.8" opacity="0.15"/>
|
||||
<text x="582" y="641" text-anchor="middle" fill="#818cf8" opacity="0.9">control_center</text>
|
||||
|
||||
<rect x="664" y="630" width="90" height="16" rx="3" fill="#10b981" stroke="#10b981" stroke-width="0.8" opacity="0.15"/>
|
||||
<text x="709" y="641" text-anchor="middle" fill="#10b981" opacity="0.9">audit</text>
|
||||
|
||||
<rect x="766" y="630" width="130" height="16" rx="3" fill="#4a9eff" stroke="#4a9eff" stroke-width="0.8" opacity="0.15"/>
|
||||
<text x="831" y="641" text-anchor="middle" fill="#4a9eff" opacity="0.9">workspace</text>
|
||||
|
||||
<rect x="908" y="630" width="100" height="16" rx="3" fill="none" stroke="#10b981" stroke-width="0.6" stroke-dasharray="4 2" opacity="0.3"/>
|
||||
<text x="958" y="641" text-anchor="middle" fill="#10b981" opacity="0.8">Nickel config</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ SOLID ENFORCEMENT ═══ -->
|
||||
|
||||
<g transform="translate(120, 759)">
|
||||
<text x="0" y="0" fill="#3a3e48" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7">
|
||||
<rect x="0" y="8" width="80" height="12" rx="3" fill="#f59e0b" opacity="0.18" stroke="#f59e0b" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="40" y="17" text-anchor="middle" fill="#f59e0b" opacity="0.8">Compile-time</text>
|
||||
<rect x="88" y="8" width="68" height="12" rx="3" fill="#818cf8" opacity="0.18" stroke="#818cf8" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="122" y="17" text-anchor="middle" fill="#818cf8" opacity="0.8">Dev-time</text>
|
||||
<rect x="164" y="8" width="74" height="12" rx="3" fill="#ec4899" opacity="0.18" stroke="#ec4899" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="201" y="17" text-anchor="middle" fill="#ec4899" opacity="0.8">Pre-commit</text>
|
||||
<rect x="246" y="8" width="50" height="12" rx="3" fill="#ef4444" opacity="0.18" stroke="#ef4444" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="271" y="17" text-anchor="middle" fill="#ef4444" opacity="0.8">CI/CD</text>
|
||||
<rect x="304" y="8" width="60" height="12" rx="3" fill="#22d3ee" opacity="0.18" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="334" y="17" text-anchor="middle" fill="#22d3ee" opacity="0.8">Runtime</text>
|
||||
<rect x="372" y="8" width="50" height="12" rx="3" fill="#94a3b8" opacity="0.18" stroke="#94a3b8" stroke-width="0.5" stroke-opacity="0.5"/>
|
||||
<text x="397" y="17" text-anchor="middle" fill="#94a3b8" opacity="0.6">Audit</text>
|
||||
</g>
|
||||
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#e2e6ee" opacity="0.6">
|
||||
<text x="460" y="16">Provider APIs or CLI: Orchestrator only | SSH: Orchestrator + Machines | Auth: Control Center only | Secrets: Vault Service API only</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ LEGEND ═══ -->
|
||||
|
||||
<g transform="translate(120, 802)" font-family="'IBM Plex Mono',monospace" font-size="8">
|
||||
<text x="0" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">SERVICES</text>
|
||||
<circle cx="7" cy="12" r="3" fill="#f59e0b"/><text x="15" y="16" fill="#6b6050">Orchestrator</text>
|
||||
<circle cx="7" cy="24" r="3" fill="#818cf8"/><text x="15" y="28" fill="#5a5878">Control Center</text>
|
||||
<circle cx="7" cy="36" r="3" fill="#ec4899"/><text x="15" y="40" fill="#5a3850">Vault Service</text>
|
||||
<circle cx="7" cy="48" r="3" fill="#ef4444"/><text x="15" y="52" fill="#5a3848">Catalog Registry</text>
|
||||
<circle cx="7" cy="60" r="3" fill="#22d3ee"/><text x="15" y="64" fill="#385a58">AI • MCP</text>
|
||||
|
||||
<text x="240" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
|
||||
<circle cx="248" cy="12" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<text x="260" y="16" fill="#5a6278" opacity="0.5">NATS Orbital Ring</text>
|
||||
<line x1="240" y1="24" x2="254" y2="24" stroke="#ef4444" stroke-width="1.5"/>
|
||||
<text x="260" y="28" fill="#ef4444" opacity="0.5">OCI registry</text>
|
||||
<line x1="240" y1="36" x2="254" y2="36" stroke="#818cf8" stroke-width="1.5"/>
|
||||
<text x="260" y="40" fill="#818cf8" opacity="0.5">Token and Auth</text>
|
||||
<line x1="240" y1="48" x2="254" y2="48" stroke="#ec4899" stroke-width="1.5"/>
|
||||
<text x="260" y="52" fill="#ec4899" opacity="0.5">SecretumVault</text>
|
||||
<line x1="240" y1="60" x2="254" y2="60" stroke="#10b981" stroke-width="1.5"/>
|
||||
<text x="260" y="64" fill="#10b981" opacity="0.5">Nickel</text>
|
||||
|
||||
<text x="460" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">CONNECTIONS</text>
|
||||
<line x1="460" y1="12" x2="474" y2="12" stroke="#4a9eff" stroke-width="2" filter="url(#glow-blue)"/>
|
||||
<line x1="460" y1="12" x2="474" y2="12" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" opacity="0.7"/>
|
||||
<text x="486" y="16" fill="#4a9eff" opacity="0.5">Encrypted</text>
|
||||
<line x1="460" y1="24" x2="474" y2="24" stroke="#ef9a3c" stroke-width="1.5" stroke-dasharray="2 2"/>
|
||||
<text x="486" y="28" fill="#ef9a3c" opacity="0.3">I/O and Defs</text>
|
||||
<line x1="460" y1="36" x2="474" y2="36" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="2 2"/>
|
||||
<text x="486" y="40" fill="#5a4878">DBs data</text>
|
||||
<line x1="460" y1="48" x2="474" y2="48" stroke="#10b981" stroke-width="1.5" stroke-dasharray="2 2"/>
|
||||
<text x="486" y="52" fill="#10b981" opacity="0.5">Secure access</text>
|
||||
<circle cx="468" cy="60" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<text x="486" y="64" fill="#5a6278">Events Stream</text>
|
||||
|
||||
<text x="700" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
|
||||
<rect x="700" y="6" width="40" height="10" rx="2" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4"/>
|
||||
<text x="720" y="14" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
|
||||
<text x="750" y="14" fill="#4a7a5a" font-size="7">RocksDB + local NATS + auto-session</text>
|
||||
<rect x="700" y="20" width="40" height="10" rx="2" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4"/>
|
||||
<text x="720" y="28" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
|
||||
<text x="750" y="28" fill="#5a5878" font-size="7">WebSocket DB + NATS cluster + JWT+Cedar</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══ DEPLOYMENT ═══ -->
|
||||
|
||||
<g transform="translate(145, 693)" font-family="'IBM Plex Mono',monospace">
|
||||
<rect x="160" y="0" width="120" height="45" rx="6" fill="#2a1515" stroke="#2a1010" stroke-width="0.8"/>
|
||||
<circle cx="174" cy="15" r="3" fill="#ef4444"/><text x="182" y="18" fill="#d0a0a0" font-size="8" font-weight="500">Production</text>
|
||||
<text x="209" y="35" fill="#5a3838" font-size="7" text-anchor="middle">Hetzner • AWS</text>
|
||||
|
||||
<rect x="300" y="0" width="120" height="45" rx="6" fill="#2a2010" stroke="#1a1810" stroke-width="0.8"/>
|
||||
<circle cx="314" cy="15" r="3" fill="#f59e0b"/><text x="322" y="18" fill="#d0c0a0" font-size="8" font-weight="500">Staging</text>
|
||||
<text x="344" y="35" fill="#5a5038" font-size="7" text-anchor="middle">K8s cluster</text>
|
||||
|
||||
<rect x="440" y="0" width="120" height="45" rx="6" fill="#1a2820" stroke="#0a1810" stroke-width="0.8"/>
|
||||
<circle cx="454" cy="15" r="3" fill="#34d399"/><text x="462" y="18" fill="#a0d0b8" font-size="8" font-weight="500">Dev</text>
|
||||
<text x="484" y="35" fill="#385a48" font-size="7" text-anchor="middle">Solo mode</text>
|
||||
|
||||
<rect x="580" y="0" width="120" height="45" rx="6" fill="#1a182a" stroke="#0a0a1a" stroke-width="0.8"/>
|
||||
<circle cx="594" cy="15" r="3" fill="#818cf8"/><text x="602" y="18" fill="#b0b0d8" font-size="8" font-weight="500">Edge</text>
|
||||
<text x="624" y="35" fill="#48486a" font-size="7" text-anchor="middle">On-prem • IoT</text>
|
||||
|
||||
<rect x="720" y="0" width="120" height="45" rx="6" fill="#1a2020" stroke="#0a1010" stroke-width="0.8"/>
|
||||
<circle cx="734" cy="15" r="3" fill="#22d3ee"/><text x="742" y="18" fill="#a0c8c8" font-size="8" font-weight="500">Custom</text>
|
||||
<text x="774" y="35" fill="#385858" font-size="7" text-anchor="middle">GitOps • Webhook</text>
|
||||
</g>
|
||||
|
||||
<!-- ═══ VERSION ═══ -->
|
||||
<text x="1180" y="880" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v5.0 • ∞ Engine Control Plane</text>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 45 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 66 KiB |
|
|
@ -1,584 +0,0 @@
|
|||
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.5"/>
|
||||
</filter>
|
||||
<filter id="inner-glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
|
||||
<feOffset dx="0" dy="0"/>
|
||||
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients -->
|
||||
<radialGradient id="core-grad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#e0f2fe"/>
|
||||
<stop offset="70%" stop-color="#bae6fd"/>
|
||||
<stop offset="100%" stop-color="#7dd3fc"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
|
||||
<stop offset="0%" stop-color="#111520"/>
|
||||
<stop offset="100%" stop-color="#0a0c10"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="config-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#162a1e"/>
|
||||
<stop offset="100%" stop-color="#0f1a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1620"/>
|
||||
<stop offset="100%" stop-color="#1a0f14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a2016"/>
|
||||
<stop offset="100%" stop-color="#1a150f"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ws-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#16202a"/>
|
||||
<stop offset="100%" stop-color="#0f151a"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a1630"/>
|
||||
<stop offset="100%" stop-color="#110f1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0f2a2e"/>
|
||||
<stop offset="100%" stop-color="#0a1c1e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2a1630"/>
|
||||
<stop offset="100%" stop-color="#1a0f1e"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
|
||||
</marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#34d399"/>
|
||||
</marker>
|
||||
<marker id="arrow-orange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||
</marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ef4444"/>
|
||||
</marker>
|
||||
<marker id="arrow-purple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#818cf8"/>
|
||||
</marker>
|
||||
<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
|
||||
</marker>
|
||||
<marker id="arrow-pink" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#ec4899"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1280" height="900" fill="#ffffff"/>
|
||||
|
||||
<!-- Subtle grid -->
|
||||
<g opacity="0.04">
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<rect width="1280" height="900" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="640" y="34" text-anchor="middle" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="700" font-size="18" letter-spacing="1.5">INFRASTRUCTURE PROVISIONING SYSTEM</text>
|
||||
<text x="640" y="62" text-anchor="middle" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-weight="400" font-size="11" letter-spacing="3">TECHNICAL ARCHITECTURE</text>
|
||||
<line x1="540" y1="72" x2="740" y2="72" stroke="#d0d0d0" stroke-width="1"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CORE HUB -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Outer decorative ring (rotating) -->
|
||||
<g class="core-ring" opacity="0.6">
|
||||
<circle cx="640" cy="370" r="115" fill="none" stroke="#666666" stroke-width="1" stroke-dasharray="3 8"/>
|
||||
</g>
|
||||
|
||||
<!-- Core circle background -->
|
||||
<circle cx="640" cy="370" r="100" fill="url(#core-grad)" filter="url(#soft-shadow)"/>
|
||||
<circle cx="640" cy="370" r="100" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<circle cx="640" cy="370" r="96" fill="none" stroke="#1a1f2e" stroke-width="0.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Core hex accent -->
|
||||
<g opacity="0.35">
|
||||
<polygon points="640,280 707,310 707,430 640,460 573,430 573,310" fill="none" stroke="#0052ff" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Core labels -->
|
||||
<text x="640" y="335" text-anchor="middle" fill="#0369a1" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.9">Provisioning</text>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="700" font-size="16" letter-spacing="0.9">Core</text>
|
||||
|
||||
<!-- Core sub-items -->
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10" fill="#6b7a90">
|
||||
<rect x="590" y="376" width="38" height="18" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="0.8"/>
|
||||
<text x="609" y="389" text-anchor="middle" fill="#0369a1">CLI</text>
|
||||
|
||||
<rect x="634" y="376" width="50" height="18" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="0.8"/>
|
||||
<text x="659" y="389" text-anchor="middle" fill="#0369a1">Libs</text>
|
||||
|
||||
<rect x="596" y="400" width="88" height="18" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="0.8"/>
|
||||
<text x="640" y="413" text-anchor="middle" fill="#0369a1">Plugins</text>
|
||||
</g>
|
||||
|
||||
<!-- Pulsing dots on core ring -->
|
||||
<circle cx="640" cy="270" r="3" fill="#4a9eff" class="dot-pulse" opacity="0.6"/>
|
||||
<circle cx="740" cy="370" r="3" fill="#34d399" class="dot-pulse dot-pulse-d1" opacity="0.6"/>
|
||||
<circle cx="640" cy="470" r="3" fill="#f59e0b" class="dot-pulse dot-pulse-d2" opacity="0.6"/>
|
||||
<circle cx="540" cy="370" r="3" fill="#ef4444" class="dot-pulse dot-pulse-d3" opacity="0.6"/>
|
||||
<circle cx="711" cy="299" r="3" fill="#818cf8" class="dot-pulse dot-pulse-d4" opacity="0.6"/>
|
||||
<circle cx="569" cy="441" r="3" fill="#ec4899" class="dot-pulse dot-pulse-d5" opacity="0.6"/>
|
||||
<circle cx="711" cy="441" r="3" fill="#22d3ee" class="dot-pulse dot-pulse-d6" opacity="0.6"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONFIGURATION LAYER (Top) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → config -->
|
||||
<path d="M 640 270 L 640 208" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Green flow path -->
|
||||
<path d="M 640 270 L 640 208" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="6 6" class="flow-green" opacity="0.7" marker-end="url(#arrow-green)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="490" y="98" width="300" height="97" rx="12" fill="#f0f9f6" filter="url(#soft-shadow)"/>
|
||||
<rect x="490" y="98" width="300" height="97" rx="12" fill="none" stroke="#a7f3d0" stroke-width="1.5"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="490" y="103" width="4" height="87" rx="2" fill="#34d399" opacity="0.6"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="516" cy="121" r="11" fill="#e5e7eb" stroke="#34d399" stroke-width="1" opacity="0.8"/>
|
||||
<text x="516" y="125" text-anchor="middle" fill="#34d399" font-size="11">🔧</text>
|
||||
|
||||
<text x="534" y="125" fill="#10a052" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Configuration Layer</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="506" y="140" width="110" height="20" rx="5" fill="#d1fae5" stroke="#a7f3d0" stroke-width="0.8"/>
|
||||
<text x="561" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Nickel Schemas</text>
|
||||
|
||||
<rect x="624" y="140" width="148" height="20" rx="5" fill="#d1fae5" stroke="#a7f3d0" stroke-width="0.8"/>
|
||||
<text x="698" y="154" text-anchor="middle" fill="#34d399" opacity="0.9">Validation Engine</text>
|
||||
|
||||
<rect x="506" y="170" width="80" height="18" rx="5" fill="none" stroke="#a7f3d0" stroke-width="0.6"/>
|
||||
<text x="546" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Type check</text>
|
||||
|
||||
<rect x="594" y="170" width="90" height="18" rx="5" fill="none" stroke="#a7f3d0" stroke-width="0.6"/>
|
||||
<text x="639" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Constraints</text>
|
||||
|
||||
<rect x="692" y="170" width="80" height="18" rx="5" fill="none" stroke="#a7f3d0" stroke-width="0.6"/>
|
||||
<text x="732" y="183" text-anchor="middle" fill="#5a7a66" font-size="9">Merge</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Green status label -->
|
||||
<rect x="583" y="222" width="44" height="16" rx="8" fill="#34d399" opacity="0.12"/>
|
||||
<text x="605" y="234" text-anchor="middle" fill="#34d399" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">VALID</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CONTROL CENTER (Top-Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → control center -->
|
||||
<path d="M 711 299 C 770 260, 830 200, 883 159" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2 4"/>
|
||||
<path d="M 711 299 C 770 260, 830 200, 884 148" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-dasharray="6 6" class="flow-purple" opacity="0.7" marker-end="url(#arrow-purple)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="895" y="98" width="260" height="105" rx="12" fill="#f3f0f9" filter="url(#soft-shadow)"/>
|
||||
<rect x="895" y="98" width="260" height="105" rx="12" fill="none" stroke="#c4b5fd" stroke-width="1.5"/>
|
||||
|
||||
<rect x="1151" y="103" width="4" height="90" rx="2" fill="#818cf8" opacity="0.5"/>
|
||||
|
||||
<circle cx="921" cy="121" r="11" fill="#e5e7eb" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="921" y="125" text-anchor="middle" fill="#818cf8" font-size="11">◉</text>
|
||||
|
||||
<text x="939" y="125" fill="#6366f1" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Control Center</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="913" y="140" width="100" height="20" rx="5" fill="#e0e7ff" stroke="#e0e7ff" stroke-width="0.8"/>
|
||||
<text x="963" y="154" text-anchor="middle" fill="#818cf8" opacity="0.9">Dashboard</text>
|
||||
|
||||
<rect x="1021" y="140" width="116" height="20" rx="5" fill="#e0e7ff" stroke="#e0e7ff" stroke-width="0.8"/>
|
||||
<text x="1079" y="154" text-anchor="middle" fill="#818cf8" opacity="0.9">Monitoring</text>
|
||||
|
||||
<rect x="913" y="172" width="55" height="18" rx="4" fill="none" stroke="#c4b5fd" stroke-width="0.6"/>
|
||||
<text x="941" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Alerts</text>
|
||||
|
||||
<rect x="975" y="172" width="55" height="18" rx="4" fill="none" stroke="#c4b5fd" stroke-width="0.6"/>
|
||||
<text x="1003" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Registry</text>
|
||||
|
||||
<rect x="1037" y="172" width="80" height="18" rx="4" fill="none" stroke="#c4b5fd" stroke-width="0.6"/>
|
||||
<text x="1077" y="183" text-anchor="middle" fill="#5a5878" font-size="9">Authorizations</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<rect x="975" y="222" width="48" height="16" rx="8" fill="#818cf8" opacity="0.12"/>
|
||||
<text x="999" y="234" text-anchor="middle" fill="#818cf8" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" letter-spacing="0.5">LIVE</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- EXTENSION ECOSYSTEM (Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → extensions -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Red flow path -->
|
||||
<path d="M 740 370 L 840 370" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 6" class="flow-red" opacity="0.7" marker-end="url(#arrow-red)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="#fef2f2" filter="url(#soft-shadow)"/>
|
||||
<rect x="860" y="270" width="290" height="200" rx="12" fill="none" stroke="#fca5a5" stroke-width="1.5"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="1146" y="275" width="4" height="190" rx="2" fill="#ef4444" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="886" cy="297" r="11" fill="#e5e7eb" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
|
||||
<text x="886" y="301" text-anchor="middle" fill="#ef4444" font-size="11">⚙️</text>
|
||||
|
||||
<text x="904" y="301" fill="#dc2626" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Extension Ecosystem</text>
|
||||
|
||||
<!-- Provider plugin cards -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- AWS -->
|
||||
<rect x="878" y="318" width="118" height="58" rx="8" fill="#fee2e2" stroke="#fee2e2" stroke-width="0.8"/>
|
||||
<text x="937" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">AWS</text>
|
||||
<text x="937" y="354" text-anchor="middle" fill="#6b5060" font-size="9">EC2 · S3 · RDS</text>
|
||||
<text x="937" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Lambda · VPC</text>
|
||||
|
||||
<!-- Hetzner -->
|
||||
<rect x="1006" y="318" width="118" height="58" rx="8" fill="#fee2e2" stroke="#fee2e2" stroke-width="0.8"/>
|
||||
<text x="1065" y="339" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Hetzner</text>
|
||||
<text x="1065" y="354" text-anchor="middle" fill="#6b5060" font-size="9">VM · Blob · SQL</text>
|
||||
<text x="1065" y="367" text-anchor="middle" fill="#6b5060" font-size="9">Functions · VNet</text>
|
||||
|
||||
<!-- Kubernetes -->
|
||||
<rect x="878" y="386" width="246" height="42" rx="8" fill="#fee2e2" stroke="#fee2e2" stroke-width="0.8"/>
|
||||
<text x="1001" y="404" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">Kubernetes</text>
|
||||
<text x="1001" y="420" text-anchor="middle" fill="#6b5060" font-size="9">Deployments · Services · ConfigMaps · Ingress</text>
|
||||
|
||||
<!-- Registry badge -->
|
||||
<rect x="870" y="438" width="270" height="20" rx="5" fill="none" stroke="#fca5a5" stroke-width="0.6"/>
|
||||
<text x="1006" y="452" text-anchor="middle" fill="#5a3848" font-size="9">Plugin Registry · Provider SDK · Custom Providers</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Red endpoints dots -->
|
||||
<circle cx="1170" cy="340" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
<circle cx="1180" cy="370" r="4" fill="#ef4444" opacity="0.2"/>
|
||||
<circle cx="1170" cy="400" r="5" fill="#ef4444" opacity="0.3" filter="url(#glow-red)"/>
|
||||
|
||||
<!-- Output label -->
|
||||
<text x="1206" y="374" fill="#ef4444" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="600" opacity="0.6" letter-spacing="0.5">OUTPUT</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- ORCHESTRATION ENGINE (Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → orchestration -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2 4"/>
|
||||
|
||||
<!-- Orange flow path -->
|
||||
<path d="M 540 370 L 420 370" fill="none" stroke="#fcd34d" stroke-width="1.5" stroke-dasharray="6 6" class="flow-orange" opacity="0.7" marker-end="url(#arrow-orange)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="#fffbf0" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="270" width="290" height="200" rx="12" fill="none" stroke="#fcd34d" stroke-width="1.5"/>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="120" y="275" width="4" height="190" rx="2" fill="#f59e0b" opacity="0.5"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="150" cy="297" r="11" fill="#e5e7eb" stroke="#fcd34d" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="301" text-anchor="middle" fill="#f59e0b" font-size="11">▶</text>
|
||||
|
||||
<text x="168" y="301" fill="#f59e0b" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Orchestration Engine</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Batch Workflows -->
|
||||
<rect x="138" y="318" width="120" height="42" rx="8" fill="#fef3c7" stroke="#fef3c7" stroke-width="0.8"/>
|
||||
<text x="198" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Batch Workflows</text>
|
||||
<text x="198" y="352" text-anchor="middle" fill="#6b6050" font-size="9">DAG · Parallel</text>
|
||||
|
||||
<!-- Execution -->
|
||||
<rect x="268" y="318" width="120" height="42" rx="8" fill="#fef3c7" stroke="#fef3c7" stroke-width="0.8"/>
|
||||
<text x="328" y="338" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">Execution</text>
|
||||
<text x="328" y="352" text-anchor="middle" fill="#6b6050" font-size="9">Plan · Apply</text>
|
||||
|
||||
<!-- State Management -->
|
||||
<rect x="138" y="370" width="250" height="42" rx="8" fill="#fef3c7" stroke="#fef3c7" stroke-width="0.8"/>
|
||||
<text x="263" y="390" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="500">State Management</text>
|
||||
<text x="263" y="404" text-anchor="middle" fill="#6b6050" font-size="9">Locking · Drift Detection · Rollback</text>
|
||||
|
||||
<!-- Pipeline status -->
|
||||
<g opacity="0.6">
|
||||
<rect x="138" y="422" width="250" height="22" rx="5" fill="none" stroke="#fcd34d" stroke-width="0.6"/>
|
||||
<!-- Pipeline dots -->
|
||||
<circle cx="172" cy="433" r="4" fill="#f59e0b" opacity="0.9"/>
|
||||
<line x1="176" y1="433" x2="208" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="212" cy="433" r="4" fill="#f59e0b" opacity="0.7"/>
|
||||
<line x1="216" y1="433" x2="248" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="252" cy="433" r="4" fill="#f59e0b" opacity="0.5"/>
|
||||
<line x1="256" y1="433" x2="288" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="292" cy="433" r="4" fill="#f59e0b" opacity="0.3"/>
|
||||
<line x1="296" y1="433" x2="328" y2="433" stroke="#3a2e1c" stroke-width="1"/>
|
||||
<circle cx="332" cy="433" r="4" fill="#34d399" opacity="0.8"/>
|
||||
<text x="354" y="437" fill="#5a5040" font-size="8">done</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- USER INPUT (Top-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Blue arrow: user input → CLI → Core -->
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<path d="M 265 125 C 350 125, 430 200, 545 310" fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.8" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<!-- User input node -->
|
||||
<g>
|
||||
<rect x="120" y="91" width="150" height="67" rx="10" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/>
|
||||
<rect x="120" y="96" width="4" height="57" rx="1.5" fill="#4a9eff" opacity="0.6"/>
|
||||
|
||||
<circle cx="147" cy="113" r="10" fill="#e5e7eb" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
|
||||
<text x="147" y="117" text-anchor="middle" fill="#4a9eff" font-size="10">⌨️</text>
|
||||
|
||||
<text x="167" y="117" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="600" font-size="13" letter-spacing="0.8">INPUT</text>
|
||||
<text x="142" y="143" fill="#8aa4c0" font-family="'IBM Plex Mono', monospace" font-size="10">$ provision deploy</text>
|
||||
</g>
|
||||
|
||||
<!-- Blue flow label -->
|
||||
<rect x="331" y="179" width="64" height="16" rx="8" fill="#4a9eff" opacity="0.1"/>
|
||||
<text x="363" y="191" text-anchor="middle" fill="#4a9eff" font-family="'IBM Plex Mono', monospace" font-size="8" font-weight="500" opacity="0.7">CLI →</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- WORKSPACE RUNTIME (Bottom) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Connection line core → workspace -->
|
||||
<path d="M 640 470 L 640 555" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2 4"/>
|
||||
<path d="M 640 470 L 640 555" fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="6 6" class="flow-blue" opacity="0.5" marker-end="url(#arrow-blue)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="504" y="565" width="270" height="95" rx="12" fill="#f0f9ff" filter="url(#soft-shadow)"/>
|
||||
<rect x="504" y="565" width="270" height="95" rx="12" fill="none" stroke="#93c5fd" stroke-width="1.5"/>
|
||||
|
||||
<!-- Accent bar bottom -->
|
||||
<rect x="504" y="661" width="270" height="4" rx="2" fill="#4a9eff" opacity="0.3"/>
|
||||
|
||||
<!-- Icon -->
|
||||
<circle cx="545" cy="584" r="10" fill="#e5e7eb" stroke="#93c5fd" stroke-width="1" opacity="0.8"/>
|
||||
<text x="545" y="588" text-anchor="middle" fill="#4a9eff" font-size="10">📁</text>
|
||||
|
||||
<text x="565" y="587" fill="#4a9eff" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Workspace Runtime</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<rect x="538" y="601" width="95" height="20" rx="5" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.8"/>
|
||||
<text x="585" y="615" text-anchor="middle" fill="#4a9eff" opacity="0.85">Context Mgmt</text>
|
||||
|
||||
<rect x="641" y="601" width="100" height="20" rx="5" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.8"/>
|
||||
<text x="691" y="615" text-anchor="middle" fill="#4a9eff" opacity="0.85">Multi-Env</text>
|
||||
|
||||
<rect x="568" y="630" width="155" height="20" rx="5" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.8"/>
|
||||
<text x="645" y="644" text-anchor="middle" fill="#4a9eff" opacity="0.85">Isolation Boundary</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VAULT SERVICE (Bottom-Left) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<path d="M 569 441 C 520 480, 430 535, 372 574" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<path d="M 569 441 C 520 480, 430 535, 372 574" fill="none" stroke="#fbcfe8" stroke-width="1.5" stroke-dasharray="6 6" class="flow-pink" opacity="0.7" marker-end="url(#arrow-pink)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="120" y="555" width="240" height="95" rx="12" fill="#fdf2f8" filter="url(#soft-shadow)"/>
|
||||
<rect x="120" y="555" width="240" height="95" rx="12" fill="none" stroke="#fbcfe8" stroke-width="1.5"/>
|
||||
|
||||
<rect x="120" y="560" width="4" height="85" rx="2" fill="#ec4899" opacity="0.5"/>
|
||||
|
||||
<circle cx="150" cy="578" r="11" fill="#e5e7eb" stroke="#fbcfe8" stroke-width="1" opacity="0.8"/>
|
||||
<text x="150" y="582" text-anchor="middle" fill="#ec4899" font-size="11">🛡️</text>
|
||||
|
||||
<text x="168" y="582" fill="#ec4899" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">Vault Service</text>
|
||||
<text x="350" y="582" text-anchor="end" fill="#ec4899" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">PQC</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="138" y="595" width="80" height="20" rx="5" fill="#fbcfe8" stroke="#fbcfe8" stroke-width="0.8"/>
|
||||
<text x="178" y="609" text-anchor="middle" fill="#ec4899" opacity="0.9">Secrets</text>
|
||||
|
||||
<rect x="226" y="595" width="116" height="20" rx="5" fill="#fbcfe8" stroke="#fbcfe8" stroke-width="0.8"/>
|
||||
<text x="284" y="609" text-anchor="middle" fill="#ec4899" opacity="0.9">Encryption</text>
|
||||
|
||||
<rect x="138" y="622" width="204" height="16" rx="4" fill="#fbcfe8" stroke="#fbcfe8" stroke-width="0.6"/>
|
||||
<text x="240" y="634" text-anchor="middle" fill="#5a3850" font-size="9">SOPS · Age · Key Rotation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M 360 595 L 450 595" fill="none" stroke="#f0f0f0" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.4"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- AI-RAG-MCP (Bottom-Right) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<path d="M 711 441 C 790 480, 860 535, 904 573" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<path d="M 711 441 C 790 480, 860 535, 904 573" fill="none" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="6 6" class="flow-cyan" opacity="0.7" marker-end="url(#arrow-cyan)"/>
|
||||
|
||||
<g class="node-group">
|
||||
<rect x="915" y="555" width="250" height="95" rx="12" fill="#ecf9ff" filter="url(#soft-shadow)"/>
|
||||
<rect x="915" y="555" width="250" height="95" rx="12" fill="none" stroke="#a5f3fc" stroke-width="1"/>
|
||||
|
||||
<rect x="1161" y="560" width="4" height="85" rx="2" fill="#22d3ee" opacity="0.5"/>
|
||||
|
||||
<circle cx="941" cy="578" r="11" fill="#e5e7eb" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
|
||||
<text x="941" y="582" text-anchor="middle" fill="#22d3ee" font-size="11">🧠</text>
|
||||
|
||||
<text x="959" y="582" fill="#0891b2" font-family="'DM Sans', sans-serif" font-weight="600" font-size="14" letter-spacing="0.8">AI · RAG · MCP</text>
|
||||
|
||||
<g font-family="'IBM Plex Mono', monospace" font-size="10">
|
||||
<rect x="933" y="595" width="100" height="20" rx="5" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.8"/>
|
||||
<text x="983" y="609" text-anchor="middle" fill="#22d3ee" opacity="0.9">RAG Engine</text>
|
||||
|
||||
<rect x="1041" y="595" width="106" height="20" rx="5" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.8"/>
|
||||
<text x="1094" y="609" text-anchor="middle" fill="#22d3ee" opacity="0.9">MCP Server</text>
|
||||
|
||||
<rect x="933" y="622" width="214" height="16" rx="4" fill="#cffafe" stroke="#a5f3fc" stroke-width="0.6"/>
|
||||
<text x="1040" y="634" text-anchor="middle" fill="#385a58" font-size="9">Embeddings · Knowledge · Tools</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path d="M 915 595 L 870 595" fill="none" stroke="#f0f0f0" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.4"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- DEPLOYMENT TARGETS (Bottom Row) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Vertical connectors from workspace to targets -->
|
||||
<path d="M 504 655 Q 430 695, 260 720" fill="none" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<path d="M 504 655 Q 430 695, 260 720" fill="none" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="580" y1="665" x2="490" y2="720" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="580" y1="665" x2="490" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<line x1="710" y1="665" x2="720" y2="720" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<line x1="710" y1="665" x2="720" y2="720" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<path d="M 774 655 Q 840 695, 950 720" fill="none" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<path d="M 774 655 Q 840 695, 950 720" fill="none" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 4" class="flow-red" opacity="0.4"/>
|
||||
|
||||
<!-- Target nodes -->
|
||||
<g font-family="'IBM Plex Mono', monospace">
|
||||
<!-- Production -->
|
||||
<rect x="178" y="720" width="160" height="54" rx="10" fill="#fee2e2" stroke="#fca5a5" stroke-width="1"/>
|
||||
<circle cx="200" cy="740" r="5" fill="#ef4444" opacity="0.8"/>
|
||||
<text x="214" y="744" fill="#dc2626" font-size="11" font-weight="500">Production</text>
|
||||
<text x="200" y="762" fill="#b91c1c" font-size="9">us-east-1 · 3 replicas</text>
|
||||
|
||||
<!-- Staging -->
|
||||
<rect x="408" y="720" width="160" height="54" rx="10" fill="#fef3c7" stroke="#fcd34d" stroke-width="1"/>
|
||||
<circle cx="430" cy="740" r="5" fill="#f59e0b" opacity="0.8"/>
|
||||
<text x="444" y="744" fill="#d97706" font-size="11" font-weight="500">Staging</text>
|
||||
<text x="430" y="762" fill="#92400e" font-size="9">eu-west-1 · 1 replica</text>
|
||||
|
||||
<!-- Dev / K8s -->
|
||||
<rect x="638" y="720" width="160" height="54" rx="10" fill="#d1fae5" stroke="#86efac" stroke-width="1"/>
|
||||
<circle cx="660" cy="740" r="5" fill="#34d399" opacity="0.8"/>
|
||||
<text x="674" y="744" fill="#059669" font-size="11" font-weight="500">Dev Cluster</text>
|
||||
<text x="660" y="762" fill="#065f46" font-size="9">k8s · minikube</text>
|
||||
|
||||
<!-- Edge / Custom -->
|
||||
<rect x="868" y="720" width="160" height="54" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
|
||||
<circle cx="890" cy="740" r="5" fill="#818cf8" opacity="0.8"/>
|
||||
<text x="904" y="744" fill="#6366f1" font-size="11" font-weight="500">Edge / Custom</text>
|
||||
<text x="890" y="762" fill="#4338ca" font-size="9">IoT · on-prem</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- LEGEND -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<g transform="translate(370, 810)" font-family="'IBM Plex Mono', monospace" font-size="9">
|
||||
<!-- Column 1 -->
|
||||
<text x="40" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">DATA FLOWS</text>
|
||||
|
||||
<line x1="40" y1="14" x2="64" y2="14" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="18" fill="#4a6a8a">User input</text>
|
||||
|
||||
<line x1="40" y1="30" x2="64" y2="30" stroke="#34d399" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="34" fill="#4a7a5a">Config validation</text>
|
||||
|
||||
<line x1="40" y1="46" x2="64" y2="46" stroke="#fcd34d" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="50" fill="#7a6a3a">Task orchestration</text>
|
||||
|
||||
<line x1="40" y1="62" x2="64" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="70" y="66" fill="#7a3a3a">Cloud output</text>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<text x="280" y="0" fill="#3a3e48" font-weight="600" font-size="8" letter-spacing="1.5">PLATFORM</text>
|
||||
|
||||
<line x1="280" y1="14" x2="304" y2="14" stroke="#818cf8" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="18" fill="#5a5a8a">Control center</text>
|
||||
|
||||
<line x1="280" y1="30" x2="304" y2="30" stroke="#fbcfe8" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="34" fill="#8a3a6a">Vault service</text>
|
||||
|
||||
<line x1="280" y1="46" x2="304" y2="46" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<text x="310" y="50" fill="#3a7a8a">AI · RAG · MCP</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- CROSS-CONNECTIONS (subtle) -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
|
||||
<!-- Config → Orchestration (dotted) -->
|
||||
<path d="M 490 170 C 400 170, 350 250, 350 270" fill="none" stroke="#f0f0f0" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.5"/>
|
||||
|
||||
<!-- Orchestration → Extensions (through core) -->
|
||||
<path d="M 410 400 C 450 450, 500 490, 640 490 C 780 490, 820 440, 860 410" fill="none" stroke="#f0f0f0" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- Config → Extensions (through core) -->
|
||||
<path d="M 790 160 C 860 160, 920 220, 940 270" fill="none" stroke="#f0f0f0" stroke-width="0.8" stroke-dasharray="2 4" opacity="0.3"/>
|
||||
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<!-- VERSION BADGE -->
|
||||
<!-- ═══════════════════════════════════════════ -->
|
||||
<text x="1236" y="880" text-anchor="end" fill="#5a6070" font-family="'IBM Plex Mono', monospace" font-size="10" letter-spacing="0.5">v3.0.11 · Architecture</text>
|
||||
|
||||
<!-- Logo reference -->
|
||||
<image x="1105" y="794" width="100" height="64" href="provisioning.svg"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 34 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
provisioning_logo-dark.svg logo image for dark mode
|
||||
provisioning_logo-light.svg logo image for normal mode
|
||||
provisioning_logo-text-dark.svg logo text for dark mode
|
||||
provisioning_logo-text-light.svg logo text for normal mode
|
||||
provisioning_logo-image.svg main image
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
Loading…
Add table
Reference in a new issue