chore: add assets

This commit is contained in:
Jesús Pérez 2026-05-12 02:53:57 +01:00
parent 3e8cfa5cd6
commit 04d0373f6d
Signed by: jesus
GPG key ID: 9F243E355E0BC939
18 changed files with 7518 additions and 0 deletions

241
assets/provisioning.svg Normal file
View file

@ -0,0 +1,241 @@
<?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>

After

Width:  |  Height:  |  Size: 25 KiB

161
assets/provisioning_img.svg Normal file
View file

@ -0,0 +1,161 @@
<?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>

After

Width:  |  Height:  |  Size: 12 KiB

243
assets/provisioning_v.svg Normal file
View file

@ -0,0 +1,243 @@
<?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>

After

Width:  |  Height:  |  Size: 25 KiB

217
assets/web/README.md Normal file
View file

@ -0,0 +1,217 @@
# Provisioning Web Assets
Web-based landing page and static content for Provisioning.
## Directory Structure
```text
assets/web/
├── src/
│ ├── index.html # Source HTML (readable, 38.3KB)
│ └── architecture-diagram.html # Architecture diagram (readable, 28.1KB)
├── index.html # Minified landing page (19.8KB)
├── architecture-diagram.html # Minified architecture (21.3KB)
├── provisioning.svg # Logo (12KB)
├── logo-text.svg # Logo text (14KB)
├── minify.sh # Minification script
└── README.md # This file
```
## Files
### `src/index.html` - Source Version
- **Purpose**: Development and maintenance
- **Size**: 38.1KB (uncompressed)
- **Content**:
- Full formatting and indentation
- Inline CSS and JavaScript
- Bilingual (English/Spanish) content
- Language-aware dynamic switching
- Core capabilities showcase
- Technology stack display
- 13 Platform services showcase
**Use for:**
- Editing content
- Understanding structure
- Version control
- Making translations updates
### `index.html` - Production Version
- **Purpose**: Served to browsers (fast loading)
- **Size**: 19.8KB (48% compression)
- **Optimizations**:
- Removed all comments
- Compressed CSS (removed spaces, combined rules)
- Minified JavaScript (single line)
- Removed whitespace between tags
- Preserved all functionality
**Use for:**
- Production web server
- CDN distribution
- Browser caching
- Fast load times
### `architecture-diagram.html` - Architecture Visualization
- **Purpose**: Interactive system architecture diagram
- **Size**: 28.1KB source → 21.3KB minified (24% compression)
- **Content**:
- Visual representation of Provisioning platform
- Component relationships and data flows
- Interactive SVG diagram
- Dark theme with animations
**Use for:**
- Understanding system design
- Architecture documentation
- Technical presentations
- Linked from landing page via "🏗️ ARCH" button
## How to Use
### Development
Edit `src/index.html`:
```bash
# Edit source file
nano provisioning/assets/web/src/index.html
# Regenerate minified version (script below)
```
### Update Minified Versions
When you update any source file in `src/`, regenerate all minified versions:
```bash
# Minify both index.html and architecture-diagram.html
./provisioning/assets/web/minify.sh
```
This script automatically:
- Minifies `src/index.html``index.html`
- Minifies `src/architecture-diagram.html``architecture-diagram.html`
- Shows compression statistics for each file
- Validates that source files exist before processing
- Stops on any errors
### Deployment
Serve `index.html` from your web server:
```bash
# Using Rust
cargo install static-web-server
static-web-server -d provisioning/assets/web/
# Using Python
python3 -m http.server --directory provisioning/assets/web
# Using Node.js
npx http-server provisioning/assets/web
# Using nginx
# Point root to provisioning/assets/web/
# Serve index.html as default
```
## Features
✅ **Responsive Design**
- Mobile-first approach
- Flexbox layouts
- Media queries for mobile
✅ **Performance**
- Inline CSS (no separate requests)
- Inline JavaScript (no blocking external scripts)
- Minimal dependencies (no frameworks)
- 19.6KB minified size
✅ **Bilingual**
- English and Spanish
- LocalStorage persistence
- Data attributes for translations
- Dynamic language switching
✅ **Modern CSS**
- CSS Gradients
- Animations (fadeInUp)
- Hover effects
- Grid layouts
✅ **Styling**
- Provisioning color scheme
- Gradient backgrounds
- Monospace font (JetBrains Mono)
- Smooth transitions
## Content Sections
1. **Hero** - Title, tagline, logo (provisioning.svg + logo-text.svg)
2. **Core Capabilities** - 4 key capabilities
3. **How It Works** - Feature overview
4. **Technology Stack** - Tech badges
5. **Platform Services** - 13 core services:
- Orchestrator (Workflow engine)
- ControlCenter (CEDAR + AUTH)
- ControlCenter-UI (Dashboard interface)
- Installer (TUI + CLI + Unattended)
- MCP-Server (RAG + AI services)
- API-Gateway (REST routing)
- OCI-Registry (Extension distribution)
- Extension-Registry (Extension catalog)
- SecretumVault (PQC vault)
- TypeDialog (Type-safe config)
- Daemon-CLI (Service management)
- Monitoring (Prometheus + Grafana)
- CoreDNS (Service discovery)
6. **CTA** - Call-to-action button
7. **Footer** - Credits and links
## Translations
All text content is bilingual. Edit data attributes in `src/index.html`:
```html
<!-- English/Spanish example -->
<span data-en="Hello" data-es="Hola">Hello</span>
```
The JavaScript automatically updates based on selected language.
## Maintenance
- Source edits go in `src/index.html`
- Regenerate `index.html` when source changes
- Both files are versioned in git
- Keep them in sync
## Git Workflow
```bash
# Edit source
git add provisioning/assets/web/src/index.html
git add provisioning/assets/web/index.html
git commit -m "Update landing page content"
git push
```
## Compression Statistics
|File|Source|Minified|Compression|Saved|
|---|---|---|---|---|
|`index.html`|38.3KB|19.8KB|48%|18.5KB|
|`architecture-diagram.html`|28.1KB|21.3KB|24%|6.8KB|
|**TOTAL**|**66.4KB**|**41.1KB**|**38%**|**25.3KB**|
---
**Last Updated**: 2026-02-10
**Version**: 1.0.0 (matches Provisioning v3.5.0)

1394
assets/web/_index.html Normal file

File diff suppressed because it is too large Load diff

700
assets/web/arch-diag-v2.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 70 KiB

584
assets/web/arch-diag.svg Normal file
View file

@ -0,0 +1,584 @@
<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>

After

Width:  |  Height:  |  Size: 34 KiB

File diff suppressed because one or more lines are too long

1
assets/web/index.html Normal file

File diff suppressed because one or more lines are too long

149
assets/web/logo-text.svg Normal file
View file

@ -0,0 +1,149 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 607.69 116.06">
<defs>
<!-- Animated gradient for text glow effect -->
<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>
<!-- Animated gradient for floating particles -->
<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>
<g id="c">
<!-- Animated floating particles background -->
<g>
<!-- Floating particles with gentle movement -->
<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>
<!-- Animated "provisioning" text -->
<g>
<!-- Letter "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);">
<!-- Pulse animation -->
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
</path>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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>
<!-- Letter "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-painted underline growing from left to right -->
<g>
<!-- Main brush stroke line - thinner than letters, slower -->
<path d="M20,95 L580,95" stroke="url(#textGradient)" stroke-width="4" fill="none" stroke-linecap="round">
<!-- Growing from left to right like brush painting - slower -->
<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>
<!-- Brush texture effect - slightly thicker stroke that follows -->
<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>
<!-- Paint drip effect at the end - smaller for thinner brush -->
<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>

After

Width:  |  Height:  |  Size: 14 KiB

97
assets/web/minify.sh Executable file
View file

@ -0,0 +1,97 @@
#!/bin/bash
# Minify HTML files from src/ to production versions
# Usage: ./minify.sh
# Processes: index.html and architecture-diagram.html
set -e
SCRIPT_DIR="$(dirname "$0")"
FILES=("index" "architecture-diagram")
minify_file() {
local basename=$1
local src_file="${SCRIPT_DIR}/src/${basename}.html"
local out_file="${SCRIPT_DIR}/${basename}.html"
local temp_file="${out_file}.tmp"
if [ ! -f "$src_file" ]; then
echo "⚠️ Skipping $basename: source file not found: $src_file"
return 0
fi
echo "🔨 Minifying $basename.html..."
echo " Input: $src_file"
echo " Output: $out_file"
perl -e "
use strict;
use warnings;
open(my \$fh, '<', '$src_file') or die \$!;
my \$content = do { local \$/; <\$fh> };
close(\$fh);
# Remove HTML comments
\$content =~ s/<!--.*?-->//gs;
# Compress CSS (remove spaces and comments)
\$content =~ s/(<style[^>]*>)(.*?)(<\/style>)/
my \$before = \$1;
my \$style = \$2;
my \$after = \$3;
\$style =~ s{\/\*.*?\*\/}{}gs;
\$style =~ s{\s+}{ }gs;
\$style =~ s{\s*([{}:;,>+~])\s*}{\$1}gs;
\$before . \$style . \$after;
/gies;
# Compress JavaScript (remove comments and extra spaces)
\$content =~ s/(<script[^>]*>)(.*?)(<\/script>)/
my \$before = \$1;
my \$script = \$2;
my \$after = \$3;
\$script =~ s{\/\/.*\$}{}gm;
\$script =~ s{\s+}{ }gs;
\$script =~ s{\s*([{}();,])\s*}{\$1}gs;
\$before . \$script . \$after;
/gies;
# Remove whitespace between tags
\$content =~ s/>\s+</></gs;
# Compress general whitespace
\$content =~ s/\s+/ /gs;
# Trim
\$content =~ s/^\s+|\s+\$//g;
open(my \$out, '>', '$temp_file') or die \$!;
print \$out \$content;
close(\$out);
" || {
echo "❌ Minification failed for $basename"
rm -f "$temp_file"
return 1
}
mv "$temp_file" "$out_file"
# Show statistics
original=$(wc -c < "$src_file")
minified=$(wc -c < "$out_file")
saved=$((original - minified))
percent=$((saved * 100 / original))
echo "$basename.html minified"
printf " Original: %6d bytes | Minified: %6d bytes | Saved: %d%% (%d bytes)\n" "$original" "$minified" "$percent" "$saved"
echo ""
}
echo "🔨 Minifying HTML files..."
echo ""
for file in "${FILES[@]}"; do
minify_file "$file" || exit 1
done
echo "✅ All HTML files minified and ready for production"

241
assets/web/provisioning.svg Normal file
View file

@ -0,0 +1,241 @@
<?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>

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,243 @@
<?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>

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,161 @@
<?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>

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -0,0 +1,361 @@
<!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");
:root {
--bg-primary: #0a0c10;
--text-primary: #c8ccd4;
--border-light: rgba(255, 255, 255, 0.1);
}
html.light-mode {
--bg-primary: #f3f4f6;
--text-primary: #1a1a1a;
--border-light: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: "DM Sans", sans-serif;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.diagram-container {
width: min(100vw, calc(100vh * 1280 / 900));
height: min(100vh, calc(100vw * 900 / 1280));
position: relative;
}
svg, img.diagram-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;
}
/* Navigation Menu */
.nav-toggle {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 100;
display: flex;
gap: 0.5rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 0.3rem 0.3rem;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.nav-btn {
background: transparent;
border: none;
color: #94a3b8;
padding: 0.5rem 1rem;
border-radius: 18px;
cursor: pointer;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
transition: all 0.3s ease;
font-family: "IBM Plex Mono", monospace;
text-decoration: none;
display: inline-block;
}
.nav-btn.active {
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
color: #fff;
}
.nav-btn:hover {
color: #10b981;
}
.theme-toggle {
background: transparent;
border: none;
color: var(--text-primary);
padding: 0.5rem 1rem;
border-radius: 18px;
cursor: pointer;
font-weight: 700;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.theme-toggle:hover {
color: #10b981;
}
@media (max-width: 768px) {
.nav-toggle {
top: 1rem;
right: 1rem;
}
}
</style>
</head>
<body>
<div class="nav-toggle">
<button
style="display: none"
class="nav-btn active"
data-lang="en"
onclick="switchLanguage('en')"
>
EN
</button>
<button
style="display: none"
class="nav-btn"
data-lang="es"
onclick="switchLanguage('es')"
>
ES
</button>
<button
class="theme-toggle"
onclick="toggleTheme()"
title="Toggle light/dark mode"
>
<span id="theme-icon">🌙</span>
</button>
<a
href="index.html"
class="nav-btn"
style="
background: rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.5);
"
>← PROVISIONING</a
>
</div>
<div class="diagram-container">
<img
id="dark-svg"
src="arch-diag-v2.svg"
alt="Provisioning Architecture - Dark Mode"
style="width: 100%; height: 100%; display: block"
/>
<img
id="light-svg"
src="w-arch-diag-v2.svg"
alt="Provisioning Architecture - Light Mode"
style="width: 100%; height: 100%; display: none"
/>
<img
id="logo"
src="provisioning.svg"
alt="Provisioning Logo"
style="display:none; /*position: absolute; bottom: 5%; right: 5.5%; width: 7.8%; height: auto*/"
/>
</div>
<script>
// Language management
const LANG_KEY = "provisioning-arch-lang";
function getCurrentLanguage() {
return localStorage.getItem(LANG_KEY) || "en";
}
function switchLanguage(lang) {
localStorage.setItem(LANG_KEY, lang);
// Update language buttons
document
.querySelectorAll(".nav-btn[data-lang]")
.forEach((btn) => {
btn.classList.remove("active");
if (btn.dataset.lang === lang) {
btn.classList.add("active");
}
});
// Update all translatable elements
document
.querySelectorAll("[data-en][data-es]")
.forEach((el) => {
const content = el.dataset[lang];
el.textContent = content;
});
document.documentElement.lang = lang;
}
// Initialize language on page load
document.addEventListener("DOMContentLoaded", () => {
const currentLang = getCurrentLanguage();
switchLanguage(currentLang);
const currentTheme = getTheme();
setTheme(currentTheme);
});
// Theme management
const THEME_KEY = "provisioning-theme";
function getTheme() {
return localStorage.getItem(THEME_KEY) || "dark";
}
function setTheme(theme) {
localStorage.setItem(THEME_KEY, theme);
const html = document.documentElement;
const icon = document.getElementById("theme-icon");
const darkSvg = document.getElementById("dark-svg");
const lightSvg = document.getElementById("light-svg");
if (theme === "light") {
html.classList.add("light-mode");
icon.textContent = "🌙";
if (darkSvg) darkSvg.style.display = "none";
if (lightSvg) lightSvg.style.display = "block";
} else {
html.classList.remove("light-mode");
icon.textContent = "☀️";
if (darkSvg) darkSvg.style.display = "block";
if (lightSvg) lightSvg.style.display = "none";
}
}
function toggleTheme() {
const currentTheme = getTheme();
const newTheme = currentTheme === "dark" ? "light" : "dark";
setTheme(newTheme);
}
</script>
</body>
</html>

1437
assets/web/src/index.html Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 70 KiB

584
assets/web/w-arch-diag.svg Normal file
View file

@ -0,0 +1,584 @@
<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>

After

Width:  |  Height:  |  Size: 34 KiB